<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>

sample_thead_tbody_tfoot_caption.html

<!-- thead/tbody/tfoot/captionをすべて使った例 -->
<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>

<!-- CSSでtheadとtfootに背景色を付ける実践例 -->
<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
  thead { background-color: #4a90e2; color: white; }
  tfoot { background-color: #f0f0f0; font-weight: bold; }
  caption { font-weight: bold; margin-bottom: 8px; text-align: left; }
</style>

<table>
  <caption>在庫一覧</caption>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">単価（円）</th>
      <th scope="col">在庫数</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>ノートPC</td><td>98,000</td><td>15</td></tr>
    <tr><td>マウス</td><td>2,500</td><td>80</td></tr>
    <tr><td>キーボード</td><td>5,800</td><td>40</td></tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合計在庫数</td>
      <td>135</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』 をご覧ください。

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

12.1 以降 ○

11.1 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

『<thead>』『<tbody>』『<tfoot>』は、CSSでのセクション別スタイリングに役立ちます。

/* ヘッダー行を固定してスクロール可能にする */
.scrollable-table {
  display: block;
  max-height: 300px;    /* テーブルの最大高さ */
  overflow-y: auto;     /* 縦スクロールを有効化 */
}

.scrollable-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* theadの背景色 */
thead {
  background-color: #4488ff;
  color: white;
}

thead th {
  font-weight: bold;
  padding: 0.75em 1em;
}

/* tbodyの行ストライプ */
tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr:hover {
  background-color: #e8f0ff;
}

/* tfootのスタイル（合計行など） */
tfoot {
  background-color: #eeeeee;
  font-weight: bold;
}

/* captionのスタイル */
caption {
  caption-side: top;   /* top（デフォルト）またはbottom */
  font-weight: bold;
  color: #444;
  padding: 0.5em 0;
}