← カテゴリ一覧に戻る

ヘッダー行・列グループ

thead, tbody, tfoot, th, scope, col, colgroup

テーブルを thead / tbody / tfoot に分割し、th と scope 属性でヘッダーとデータの関係を明示することで、アクセシビリティが大幅に向上します。

デモ：thead / tbody / tfoot の構造

月売上費用利益
1月¥480,000¥310,000¥170,000
2月¥520,000¥295,000¥225,000
3月¥610,000¥340,000¥270,000
合計¥1,610,000¥945,000¥665,000

デモ：colgroup で列をまとめてスタイリング

科目前期今期増減
国語7885+7
数学9288-4

黄色の列は colgroup / col で背景色を指定しています

コード例

<table>
  <!-- colgroup: 列グループ定義（スタイルを列単位で適用） -->
  <colgroup>
    <col style="width: 40%;" />
    <col style="background-color: #fef9c3;" /> <!-- 2・3列目を黄色に -->
    <col style="background-color: #fef9c3;" />
    <col />
  </colgroup>

  <!-- thead: ヘッダー行グループ -->
  <thead>
    <tr>
      <!-- scope="col": この th が列ヘッダーであることを明示 -->
      <th scope="col">月</th>
      <th scope="col">売上</th>
      <th scope="col">費用</th>
      <th scope="col">利益</th>
    </tr>
  </thead>

  <!-- tbody: データ本体 -->
  <tbody>
    <tr>
      <!-- scope="row": この th が行ヘッダーであることを明示 -->
      <th scope="row">1月</th>
      <td>¥480,000</td>
      <td>¥310,000</td>
      <td>¥170,000</td>
    </tr>
  </tbody>

  <!-- tfoot: フッター行グループ（合計行など） -->
  <tfoot>
    <tr>
      <th scope="row">合計</th>
      <td>¥1,610,000</td>
      <td>¥945,000</td>
      <td>¥665,000</td>
    </tr>
  </tfoot>
</table>

<style>
  /* sticky header: スクロール時もヘッダーを固定 */
  thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #1e40af;
    color: white;
  }
</style>

Tipsscope 属性でスクリーンリーダーのナビゲーションを助ける

scope 属性はスクリーンリーダーが表のヘッダーとデータセルの関係を正しく解釈するために不可欠です。

  • scope="col" — そのセルが列全体のヘッダーであることを示す
  • scope="row" — そのセルが行全体のヘッダーであることを示す
  • scope="colgroup" — 複数列のグループヘッダー（colspan と組み合わせて使用）
  • scope="rowgroup" — 複数行のグループヘッダー（rowspan と組み合わせて使用）

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<th scope="col">` と `<th scope="row">` の違いと、スクリーンリーダーがどう読み上げるかを教えてください。
- `<colgroup>` と `<col>` を使って列にまとめてスタイルを適用する方法と、適用できる CSS プロパティの制限を教えてください。
- `<tfoot>` はHTMLで `<tbody>` の前後どちらに書いても表示は同じですか？仕様と実装の違いを教えてください。
- `position: sticky` を使ってテーブルのヘッダー行を固定する方法と、注意すべき CSS の書き方を教えてください。
- `<caption>` と `aria-label` / `aria-describedby` を使ったテーブルのアクセシブルな名前付けの方法を教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo