ホームページ制作/SOHO/福岡
Eメール tk-1980@mx4.et.tiki.ne.jp
メニュー
トップページ
HTMLの基本
HTMLとは
書き方の基本
ファイル名について
よく使うタグ
テーブルでレイアウト
基本
特殊なテーブル
ホームページ作成
スタイルシート
スタイルシートとは
背景
小技集
よく使うHTMLタグ
 これだけで十分!!
タグ一覧

表(テーブル)の高さ、横幅の設定

テーブルの高さ、横幅の設定は、テーブル<table>タグよりもセル<td>タグ
で設定するほうが良いようなので、セルの大きさを変えて、テーブルの大
きさを変えます。

width="数値" 横幅決める

height="数値" 高さを決める

<table border="2">
<tr>
 <td bgcolor="#ffccff" width="100" height="100">セル 1</td>
<td bgcolor="#ffffcc" width="500">セル 1-2</td>
</tr>
<tr>
 <td bgcolor="fuchsia" height="50">セル 2-1</td>
<td bgcolor="ffee66">セル 2-2</td>
</tr>
</table>

セル 1セル 1-2
セル 2-1セル 2-2


<table>
<tr>
<td bgcolor="#ffccff" width="250" height="50">セル 1</td>
<td bgcolor="#ffffcc" width="100">セル 1-2</td>
</tr>
<tr>
<td bgcolor="fuchsia" height="100">セル 2-1</td>
<td bgcolor="ffee66">セル 2-2</td>
</tr>
</table>

セル 1セル 1-2
セル 2-1セル 2-2



セル間の高さと横幅の関係

一行目の<td>タグのwidthの幅を100ピクセルにします。
二行目の<td>タグのwidthの幅を500ピクセルにします。

<table border border="2">
<tr>
 <td bgcolor="#ffccff" width="100">一行目1列目</td>
 <td bgcolor="#ffffcc" width="100">一行目二列目</td>
</tr>
<tr>
<td bgcolor="fuchsia" width="200">二行目1列目</td>
<td bgcolor="ffee66" width="200">二行目二列目</td>
<tr>
</table>

一行目1列目一行目二列目
二行目1列目二行目二列目

結果は両方同じ幅になりました。
高さ、幅ともに値の大きい方が採用されるみたいですね。



セル内の文章がwidthで設定した横幅より大きくなると勝手に改行されます。
うまく調節してください。

<table border>
<tr><td width="100">あいうえおかきくけこさしすせそ</td></tr>
</table>

あいうえおかきくけこさしすせそ


次へ
戻る
メニューへ

△△ページトップへ△△

[HP制作][HP講座][日記][サイトマップ][掲示板]
ホームページ制作代行サービス 流文-nagarefumi-
Eメール tk-1980@mx4.et.tiki.ne.jp