テーブル

component

列ごとの項目名を上に並べて、複数のデータを行で比較するテーブルです。1 件の詳細を縦に並べて見せるときはシンプルテーブルを使います。

基本

項目名の行（thead）が上、データ行（tbody）が下。値が無いセルは — を text-fg-middle で表示（10.35:1、WCAG AAA）

Item	Name	Description	Optional
1	Container	コンテナ要素	—
2	Header	ヘッダー要素	—
3	Body	ボディ要素	—

使用例 — td 内に任意の UI

セルにはバッジやリンク、ボタンも入れられる

案件名	ステータス	担当者	詳細
Aプロジェクト	公開中	山田太郎	詳細を見る
Bプロジェクト	審査中	佐藤花子	詳細を見る
Cプロジェクト	下書き	—	詳細を見る

機能

このコンポーネントの用途

列見出しを上に置き、複数データを行で比較する表。
1 件の詳細を縦に並べるなら data-table ではなく simple-table。

使用法

推奨される使い方と、やりがちな NG パターン

✓thead に列見出し、tbody に行データを置く。

✕1 件の項目一覧（キー/値）に使わない → simple-table。
✕罫線・余白を直書きしない → .data-table の既定を使う。

複数件の比較は table・1 件の詳細は simple-table

用途の使い分け

Good

案件	状態
A	公開中
B	審査中

複数件を列で比較するときは data-table（thead の列見出し）。

<table class="data-table">
  <thead><tr><th scope="col">案件</th>…</tr></thead>
</table>

Don't

項目	値
プロジェクト名	A
担当者	山田

1 件の属性を縦に並べるのに data-table を使わない → simple-table（行見出し）が適切。

<!-- 1 件の詳細は simple-table を使う -->
<table class="simple-table"><tr><th scope="row">担当者</th><td>山田</td></tr></table>

テーブルのアクセシビリティ

ネイティブ <table> ベース。列見出しに <th scope="col">、表の名前に <caption>、空セルは —、幅広なら横スクロールで reflow を担保します。WCAG 2.2 全基準はアクセシビリティページを参照。

期待される配慮

Presentation / Adaptability / Interaction / Assistive Technology

提示

見出し行とデータ行を視覚的に区別。空セルは空白でなく —（fg/middle・AAA）で「値なし」を明示。

適応

幅が足りない時は横スクロールで内容を保持（reflow）。文字は rem で拡大に追従。

操作

横スクロール領域はキーボードでもスクロールできるようにする（フォーカス可能なコンテナ等）。

支援技術

<th scope="col"> で列とデータの対応が読まれる。<caption> か aria-label で表に名前を付ける。

DS が担保する機能

追加実装なしで満たされる

✓ネイティブ <table>／thead／tbody のセマンティック構造
✓見出し行とデータ行のコントラスト・区切りを確保
✓空セルの — は fg/middle（10.35:1・AAA）で可読
✓カタログでは狭幅時に card-body が横スクロール（reflow の下地）

実装時の必須対応

プロダクト側で担保する

!列見出しを <th scope="col"> にする（データセルは td）
!表に <caption> か aria-label で名前を付ける
!空セルは空白にせず —（またはテキスト）で「値なし」を示す
!幅広なテーブルは overflow-x: auto のコンテナで包み、キーボードでもスクロールできるようにする

テスト方法

スクリーンリーダー / 拡大・リフロー / 自動チェック

SR各セルで対応する列見出しが読まれる（「状態、公開中」等）。表の名前が読まれる
拡大320px 幅・200% 拡大で、横スクロールを許容しつつ情報が欠けない
自動axe / Lighthouse で th／scope・caption・コントラストを確認

列見出しは `th scope="col"`・空セルは `—`

達成基準：WCAG 1.3.1 情報及び関係性