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

テーブルのサイズを指定する

ホームページやブログなどのウェブサイトに 表を表示させるには TABLEタグを使ってテーブルを作成しますが、このとき width指定と height指定で表のサイズ(縦x横)を指定することができます。

<table width="幅の指定" height="高さの指定"></table>
  • 幅の指定/高さの指定:数値のみ (この数値はピクセル値として扱われます。) または 割合(表示可能最大寸法に対する%指定)で 表のサイズを指定します。

ピクセル値で指定する場合のサンプルです。幅を 300ピクセル、高さを 70ピクセルに指定すると、次のような表ができます。

とり

ソースは、こんな感じになります。

<table border="1" width="300" height="70">
<tr><td><img src="./sample/bird.gif" width="50" height="50"></td><td>とり</td></tr>
</table>

幅を表示可能な最大の横幅に対する相対的な長さとして、同じ表を幅 50%、高さ 80%で指定してみます。表示可能な最大幅は グレーの部分ですので、これに対する割合になります。

とり

ソースは、つぎの通りです。割合で指定した場合、表示可能な最大幅が変わると、表の幅もそれにあわせて変化します。=>サンプルはこちら。

<table border="1" width="50%" height="70%">
<tr><td><img src="./sample/bird.gif" width="50" height="50"></td><td>とり</td></tr>
</table>

指定の範囲内で、各セルの幅や高さは自動調整されます。また、いづれの指定でも セルの幅や高さと枠幅の合計値がこれよりも大きい場合は、この指定は無視されます。

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

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

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