セルのサイズを指定する
TABLEタグを使って作る表は、width指定と height指定でセルのサイズ(縦x横)を指定することができます。
<タグ名 width="セルの幅" height="セルの高さ">~</タグ名>
- タグ名:THタグまたはTDタグが使用可能です。
- セルの幅/セルの高さ:ピクセル値または、表全体の幅/高さに対する割合(%)で指定します。ピクセルで指定する場合、『width="100"』のように、単位をつけずに値を指定します。
割合で指定する場合は、、『width="30%"』のように 半角で % をつけて記述してください。
一列目の幅を100ピクセル、2列目の幅を200ピクセルとし、1行目の高さを50ピクセル、2行目の高さを80ピクセルとした表を作ってみます。
| 横幅:100px 高さ:50px |
横幅:200px 高さ:50px |
| 横幅:100px 高さ:80px |
横幅:200px 高さ:80px |
ソースは、次の通りです。
<table border="1">
<tr>
<td width="100" height="50"> 横幅:100px<br>高さ:50px</td>
<td width="200" height="50"> 横幅:200px<br>高さ:50px</td>
</tr>
<tr>
<td width="100" height="80"> 横幅:100px<br>高さ:80px</td>
<td width="200" height="80"> 横幅:200px<br>高さ:80px</td>
</tr>
</table>
<tr>
<td width="100" height="50"> 横幅:100px<br>高さ:50px</td>
<td width="200" height="50"> 横幅:200px<br>高さ:50px</td>
</tr>
<tr>
<td width="100" height="80"> 横幅:100px<br>高さ:80px</td>
<td width="200" height="80"> 横幅:200px<br>高さ:80px</td>
</tr>
</table>
セル内の画像などの幅または高さと枠幅の合計値が、指定した幅または高さを超えた場合は この指定は無視されます。
テキストは一般的に横幅指定優先で自動改行されます。その結果 指定した高さを超えた場合、その高さ指定は無視されます。ブラウザの自動改行により セルの高さが変化し、期待通りに表示されない場合があります。このため、テキストを含む表の高さを指定することは あまりおすすめできません。
基本的には 同一テーブル内のどこか1つのセルで幅の指定をすれば同じ列のすべてに反映されますし、どこか1つのセルで高さを指定すれば同じ行のすべてに反映されます。
ただし、幅の指定を省略したセルでブラウザの自動改行が発生した場合、期待する位置で改行されず、セルの幅を押し広げてしまう場合があります。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス