Design Pattern
テーブル
テーブルはデータを行と列で整理して一覧表示するパターンです。見出しセル、スコープ、キャプションを正しく設定することで、支援技術でも構造が伝わります。
いつ使う / 使わない
使うべきとき
- 複数の項目を比較するデータがある場合
- 行と列の交差で意味が生まれるデータの場合
- 表計算的なデータを一覧で見せたい場合
使わないべきとき
- レイアウト目的 → CSS Grid や Flexbox を使う
- 単純なリスト → ul / ol を使う
- 列が多すぎてレスポンシブ対応が困難な場合 → カード形式を検討する
構造（Anatomy）
1 キャプション（caption）
2 見出し行（thead > tr > th）
3 データ行（tbody > tr > td）
4 スコープ属性（scope）
- キャプション — テーブルの目的や内容を簡潔に説明する
- 見出しセル — th 要素で列や行の見出しを定義し、scope で方向を明示する
- データセル — td 要素でデータ本体を格納する
- スコープ — scope="col" や scope="row" で見出しとデータの関係を伝える
HTML 構造
重要なポイント
- caption 要素でテーブルの目的を明示する
- thead と tbody でヘッダー行とデータ行を構造的に分ける
- 列見出しには th scope="col"、行見出しには th scope="row" を設定する
- 複雑なテーブルでは headers 属性でセルと見出しを紐づける
CSS 実装
見た目で補助すべき点
- ボーダー — border-collapse: collapse でセル間の二重線を防ぐ
- ストライプ — nth-child で奇数行・偶数行に背景色を付け、行の区別を助ける
- レスポンシブ — overflow-x: auto のラッパーで横スクロール可能にする
- 固定ヘッダー — position: sticky で縦スクロール時も見出し行を固定できる
アクセシビリティ
WCAG 1.3.1 情報及び関係性
th 要素と scope 属性で見出しとデータの関係がプログラム的に伝わる必要があります。
WCAG 1.3.2 意味のある順序
テーブル内のデータが論理的な順序で読み上げられる必要があります。
WCAG 2.1.1 キーボード
テーブル内のリンクやボタンがキーボードで操作可能である必要があります。
キーボード操作
- Tab でテーブル内のインタラクティブ要素に移動
- スクリーンリーダーではテーブルナビゲーション（矢印キー）でセル間を移動できる
- caption があるとテーブルの目的を事前に把握できる
ライブデモ
基本のテーブル
行と列の見出し、キャプションを正しく設定した基本構造です。
ストライプテーブル
奇数行に背景色を付けて視認性を高めたバリエーションです。
レスポンシブテーブル
横スクロールでモバイルでも表を崩さず表示するパターンです。
よくある間違い
レイアウトにテーブルを使う
データの一覧表示以外にテーブルを使うと、支援技術が誤った構造を伝えてしまいます。
th を使わず td だけで構成する
見出しセルがないと、スクリーンリーダーでセルの意味が分かりません。
caption や summary を省略してテーブルの目的が不明
テーブルが何のデータかを示すキャプションがないと、ユーザーが内容を把握しにくくなります。