thead要素とは

<thead>要素は、table（テーブル） header（ヘッダー）の略で、表のヘッダー部分を表す要素です。 例えば、内容が多い表を印刷すると複数のページになる場合があります。その際、各ページに表のヘッダーがあれば分かりやすくなります。この<thead>要素を使ってヘッダー部分を明示することで、プリンターなどに表のヘッダーを伝えるサポートが出来ます。

意味・役割
表（テーブル）のヘッダーを表す要素
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
なし
（HTML5より前：なし）
コンテンツ・モデル（梱包できる要素）
0個以上の<tr>要素
この要素を配置できる親要素
<table>要素。
ただし、<caption>要素、 <colgroup>要素より後ろで、 <tbody>要素、 <tfoot>要素、 <tr>要素よりは、前に配置

thead要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

align属性 XHTML1.1で廃止

align（アライン）属性は、行内のセルに対してテキストの揃え方を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:text-align プロパティで行うようにしましょう。

<thead align="テキスト揃え方">
属性値
  • "left"： 左揃え
  • "center"： 中央揃え
  • "right"： 右揃え
  • "justify"： 両端揃え （均等配置）
  • "char"： char属性で指定した文字で揃える
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<thead align="center">

valign属性 XHTML1.1で廃止

valign（ブイアライン）属性は、vertical（バーティカル） align（アライン）の略で、 行内の垂直方向の揃え方を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:vertical-align プロパティで行うようにしましょう。

<thead valign="垂直方向の揃え方">
属性値
  • "top"： 上揃え
  • "middle"： 中央揃え
  • "bottom"： 下揃え
  • "baseline"： ベースラインで揃える （1行目のみ）
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<thead valign="top">

char属性 XHTML1.1で廃止

char（キャラ）属性は、character（キャラクター）の略で、align属性で、"char" を指定した際、テキストを揃える文字を指定する属性です。 基本的には、小数点などを揃える為に使用する為、 "." （ピリオド）を指定します。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSS3の:text-align プロパティで char の指定で行うようにしましょう。

<thead char="テキストを揃える文字" align="char">
属性値
テキストを揃える文字
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<thead char="." align="char">

charoff属性 XHTML1.1で廃止

charoff（キャラオフ）属性は、character（キャラクター） offset（オフセット）の略で、 char属性が指定された場合において、その文字の オフセット （ずらす量）を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。

<thead charoff="オフセットする文字数" char="テキストを揃える文字" align="char">
属性値
  • 整数： 画像の横幅（px）
  • パーセンテージ： 画像の割合
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<thead align="char" char="." charoff="40">

thead要素のサンプル

thead要素を使った表の例
<table border="1">
  <thead>
    <tr>
      <th>商品コード</th>
      <th>商品名</th>
      <th>数量</th>
      <th>金額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>D001</td>
      <td>製品A</td>
      <td>2</td>
      <td>5,000</td>
    </tr>
    <tr>
      <td>D002</td>
      <td>製品B</td>
      <td>1</td>
      <td>8,000</td>
    </tr>
    <tr>
      <td>D003</td>
      <td>製品C</td>
      <td>2</td>
      <td>10,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="rowgroup">合計</th>
      <td>38,000</td>
    </tr>
  <tfoot>
</table>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

仕様

HTML5.1
4.9.6. The thead element
HTML5
4.9.6 The thead element
HTML4.01
11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements

関連する要素

関連するレッスン