<TABLE width="" height="">テーブルのサイズを設定

テーブル(表)全体の幅と高さを設定するには、<TABLE>にwidth属性とheight属性を指定する事で調整できます。 いずれの値もピクセル数で指定するか、ウィンドウのサイズに対する割合をパーセンテージ(%)で指定します。

なお高さを調整するためのheight属性は、一部のブラウザが独自に拡張した属性となります。一般的なブラウザの中にはheight属性をサポートしているものもありますが、標準的なHTMLの仕様ではtable要素にheight属性はありません。

※HTML4.01の仕様には含まれていない。

高さを指定したい場合は、セルを示すth要素td要素にはheight属性がありますので、そちらを利用するようにしましょう。

またwidth属性の方は非推奨とされていませんが、テーブル(表)の幅と高さの指定はできる限りスタイルシートを用いることをオススメします。

使用した時の例

<table border="2" width="100%">
  <tr>
     <th>見出し1</th>
     <th>見出し2</th>
     <th>見出し3</th>
  </tr>
  <tr>
     <td>データ1</td>
     <td>データ2</td>
     <td>データ3</td>
  </tr>
  <tr>
     <td>データ4</td>
     <td>データ5</td>
     <td>データ6</td>
  </tr>
</table>

<table border="2" width="50%">
  <tr>
     <th>見出し1</th>
     <th>見出し2</th>
     <th>見出し3</th>
  </tr>
  <tr>
     <td>データ1</td>
     <td>データ2</td>
     <td>データ3</td>
  </tr>
  <tr>
     <td>データ4</td>
     <td>データ5</td>
     <td>データ6</td>
  </tr>
</table>

ブラウザ上の表示例

見出し1 見出し2 見出し3
データ1 データ2 データ3
データ4 データ5 データ6
見出し1 見出し2 見出し3
データ1 データ2 データ3
データ4 データ5 データ6

対応ブラウザなどのデータ

形式 <TABLE width="" height="">~</TABLE> 分類 ブロックレベル要素
開始タグ 必須 終了タグ 必須
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5では廃止されている。代わりにスタイルシートの「style="width:数値;"」で幅を調整できます。