TOPページ >  テーブルを作成する > セルのサイズを指定する

セルのサイズを指定する

TABLEタグを使って作る表は、width指定と height指定でセルのサイズ(縦x横)を指定することができます。

<タグ名 width="セルの幅" height="セルの高さ"></タグ名>
  1. タグ名:THタグまたはTDタグが使用可能です。
  2. セルの幅/セルの高さ:ピクセル値または、表全体の幅/高さに対する割合(%)で指定します。ピクセルで指定する場合、『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>

セル内の画像などの幅または高さと枠幅の合計値が、指定した幅または高さを超えた場合は この指定は無視されます。

テキストは一般的に横幅指定優先で自動改行されます。その結果 指定した高さを超えた場合、その高さ指定は無視されます。ブラウザの自動改行により セルの高さが変化し、期待通りに表示されない場合があります。このため、テキストを含む表の高さを指定することは あまりおすすめできません。

基本的には 同一テーブル内のどこか1つのセルで幅の指定をすれば同じ列のすべてに反映されますし、どこか1つのセルで高さを指定すれば同じ行のすべてに反映されます。
ただし、幅の指定を省略したセルでブラウザの自動改行が発生した場合、期待する位置で改行されず、セルの幅を押し広げてしまう場合があります。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
テーブル自動作成フォーム2
セル内の文字/画像の縦方向表示位置を指定する
セル内の文字/画像の横方向表示位置を指定する
セル内の余白を指定する
セルとセルの間隔を指定する
テーブルの背景画像を表示する
テーブルの背景色を指定する
テーブル枠の色を指定する
テーブルに枠をつける
テーブルの左右に文字/画像を回り込ませる
テーブルに表題をつける
セルのサイズを指定する
テーブルのサイズを指定する
テーブルに画像やボタンを表示する
横にまたがるセルを作る
縦にまたがるセルを作る
テーブルを作成する
テーブル自動作成フォーム
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス