HTML5タグ虎の巻

theadタグ

theadは、テーブルのヘッダー行領域を表すタグです。

tableタグの子要素として使用します。

解説

theadはtableタグの子要素として使用し、表のタイトル部分を明示的に示したい時に使用します。
theadタグは意味付けのタグのため、theadタグを使用してもCSSを適用させない限り見た目には何も変化はありません。
また、theadタグの使用は必須ではないので使わなくても構いません。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
なし
コンテキスト
(親カテゴリ)
tableタグ
コンテンツ・モデル
(子カテゴリ)
trタグ

属性

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

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

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

サンプル

表のタイトル部分、メイン部分、フッター部分を明示的に示したサンプル

<table>
  <thead>
    <tr><th>商品名</th><th>金額</th></tr>
  </thead>
  <tbody>
    <tr><td>みかん</td><td>100</td></tr>
    <tr><td>りんご</td><td>200</td></tr>
    <tr><td>ぶどう</td><td>300</td></tr>
  </tbody>
  <tfoot>
    <tr><td>合計</td><td>600</td></tr>
  </tfoot>
</table>
商品名金額
みかん100
りんご200
ぶどう300
合計600

theadを使っても使わなくても見た目に変化はありません。

備考

  • theadは「table header」の略です。
  • 表の領域を表すものにはthead以外に、tbodyとtfootがあります。
  • thead、tbody、tfootは指定しなくても問題ありませんが、より明確に表のヘッダー部分、内容部分、フッター部分を明示したい場合は指定してください。

関連項目

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