Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<thead> / <tbody> / <tfoot> / <caption>

<thead> / <tbody> / <tfoot> / <caption>

『<thead>』『<tbody>』『<tfoot>』はテーブルの行をヘッダー・本体・フッターにグループ化する要素で、『<caption>』はテーブルにタイトルを付ける要素です。

構文

<table>
  <caption>テーブルのタイトル</caption>
  <thead>
    <tr><th>見出し1</th><th>見出し2</th></tr>
  </thead>
  <tbody>
    <tr><td>データ1</td><td>データ2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>合計</td><td>100</td></tr>
  </tfoot>
</table>

タグ一覧

タグ	概要
<caption>	テーブルのタイトル・見出しを指定します。必ず『<table>』の最初の子要素として記述します。
<thead>	テーブルのヘッダー行グループを表します。列見出しを含む行を入れます。
<tbody>	テーブルの本体（データ行）グループを表します。実際のデータを入れます。複数指定できます。
<tfoot>	テーブルのフッター行グループを表します。合計・注釈などを入れます。

サンプルコード

<table border="1">
  <!-- テーブルのタイトル -->
  <caption>2024年 月別売上表</caption>

  <!-- 見出し行のグループ -->
  <thead>
    <tr>
      <th scope="col">月</th>
      <th scope="col">売上（万円）</th>
      <th scope="col">前月比</th>
    </tr>
  </thead>

  <!-- データ行のグループ -->
  <tbody>
    <tr>
      <td>1月</td>
      <td>120</td>
      <td>+5%</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>98</td>
      <td>-18%</td>
    </tr>
    <tr>
      <td>3月</td>
      <td>145</td>
      <td>+48%</td>
    </tr>
  </tbody>

  <!-- フッター行のグループ（合計など） -->
  <tfoot>
    <tr>
      <td>合計</td>
      <td>363</td>
      <td>—</td>
    </tr>
  </tfoot>
</table>

実行結果

「2024年月別売上表」というキャプションが付いたテーブルが表示されます。ヘッダー行・3件のデータ行・合計フッター行の構造になります。印刷時に複数ページにまたがる場合、ブラウザによってはヘッダーとフッターが各ページに繰り返し表示されます。

概要

『<thead>』・『<tbody>』・『<tfoot>』を使うと、テーブルの構造が明確になり、スクリーンリーダーやCSSによるスタイリングがしやすくなります。HTMLの仕様上、『<tfoot>』は『<tbody>』よりも前（『<thead>』の直後）に記述することもできますが、表示順は必ず本体→フッターの順になります。現代のブラウザでは記述順に関係なく正しく表示されますが、可読性のため『<tfoot>』は末尾に書くのが一般的です。

『<caption>』はテーブルの内容を一言で説明するタイトルを付けるための要素で、アクセシビリティの観点からも積極的に使うことをおすすめします。デフォルトではテーブルの上部中央に表示されますが、CSSの『caption-side』プロパティで下部に移動させることもできます。

テーブルの基本的な構造（『<table>』・『<tr>』・『<td>』・『<th>』）については『table / tr / td / th』をご覧ください。