HTML5タグ虎の巻

tableタグ

tableは、表を作成するタグです。

表の行やセルなどの要素を作成するには、それぞれ別のタグを使用します。

解説

tableタグは表を作成するタグですが、単独で使用する事はなく以下の子要素タグを同時に組み合わせて表を作成します。タグの詳細は各ページをご覧ください。

【tableの子要素タグ】
tr表の行を定義する
th表のヘッダセルを定義する
td表のセルを定義する
tbodyテーブルのメイン領域を表す
theadテーブルのヘッダー行領域を表す
tfootテーブルのフッター行領域を表す
caption表をのタイトルを指定する
colgroup表の列をグループ化する
col表の列を表す

テーブルタグの構造は以下のようになります。

テーブルタグの構造

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
コンテキスト
(親カテゴリ)
フロー・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
trタグthタグtdタグtbodyタグtheadタグtfootタグcaptionタグcolgroupタグ

属性

tableタグには以下の属性が指定できます。

【属性】
属性説明
summary表の説明を指定する
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

簡単なテーブルサンプル

<table>
  <caption>【在庫一覧】</caption>
  <tr><th>商品</th><th>単価</th><th>個数</th><th>金額</th></tr>
  <tr><td>みかん</td><td>50</td><td>30</td><td>1,500</td></tr>
  <tr><td>りんご</td><td>100</td><td>20</td><td>2,000</td></tr>
  <tr><td>ぶどう</td><td>300</td><td>5</td><td>2,400</td></tr>
</table>
【在庫一覧】
商品単価個数金額
みかん50301,500
りんご100202,000
ぶどう30052,400

厳密にタグ付けしたテーブルのサンプル

<table>
  <caption>【在庫一覧】</caption>
  <thead>
    <tr><th>商品</th><th>単価</th><th>個数</th><th>金額</th></tr>
  </thead>
  <tbody>
    <tr><td>みかん</td><td>50</td><td>30</td><td>1,500</td></tr>
    <tr><td>りんご</td><td>100</td><td>20</td><td>2,000</td></tr>
    <tr><td>ぶどう</td><td>300</td><td>8</td><td>2,400</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">(合計)</td><td>58</td><td>5,900</td></tr>
  </tfoot>
</table>
【在庫一覧】
商品単価個数金額
みかん50301,500
りんご100202,000
ぶどう30082,400
(合計)585,900

備考

  • thead、tfoot、tbodyは省略しても問題ありませんが、表の構成を明確に表したい場合に使用してください。

関連項目

  • table:表を作成する
  • tr:表の行を定義する
  • th:表のヘッダセルを定義する
  • td:表のセルを定義する
  • tbody:テーブルのメイン領域を表す
  • thead:テーブルのヘッダー行領域を表す
  • tfoot:テーブルのフッター行領域を表す
  • caption:表をのタイトルを指定する
  • colgroup:表の列をグループ化する
  • col:表の列を表す