<thead>テーブルの見出しを定義する

<thead>タグは、テーブル(表)の列見出しを構成するヘッダ行(table head)を表します。

またテーブル(表)の作成の仕方によっては、各行グループを<thead>(テーブルヘッダ)、<tbody>(テーブルボディ)、<tfoot>(テーブルフッタ)の3つに分類することができます。 これらの要素は必ずしも必要というわけではなく、省略する事もできますが、指定する事でテーブルの構造がより明確に表せるでしょう。

指定する場合はtable要素の子要素として、caption、colgroup要素より後に配置します。 またthead要素はtbody要素よりも前に記述する必要があります。

thead要素内に入れるセル要素として、td要素を使用する事はできません。 必ずth要素を使うようにしましょう。 またthead要素は、table要素内に1つまで配置することができます。 ですがthead要素内にtr要素を複数入れて、複数行にわたる見出しを作成する事は可能です。

HTML5での変更点

HTML5のthead要素では、align属性、valign属性、char属性、charoff属性が廃止されています。 また、thead要素内へのtr要素の配置は必須ではなくなりました。

書式

  • <thead 属性="値">~</thead> ……… テーブル(表)のヘッダ行を定義

使用した時の例

<table border=1>
<caption>テーブル(表)のサンプル</caption>
 <thead>
  <tr>
    <th>商品</th>
    <th>販売実績</th>
    <th>在庫数</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>リンゴ</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>缶詰</td>
    <td>200</td>
    <td>10</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <th>合計</th>
      <td>300</td>
      <td>110</td>
  </tr>
 </tfoot>
</table>

ブラウザ上の表示例

テーブル(表)のサンプル
商品 販売実績 在庫数
リンゴ 100 100
缶詰 200 10
合計 300 110

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

形式 <thead>~</thead> カテゴリ なし
親要素 table 子要素 tr, script, template
開始タグ 必須 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~