シンプルテーブル
component「項目名」と「内容」を 2 列で並べるシンプルな表です。プロジェクトの概要や登録情報の確認画面などに使います。
基本
th が左の固定列（128px）、td が右の伸縮列
| プロジェクト名 | relay Design System |
|---|---|
| 担当者 | 山田 太郎 |
| 作成日 | 2026-06-01 |
| ステータス | 進行中 |
| カテゴリ | UI / Design |
セル merge (rowspan)
複数行の th に対して 1 つの td を rowspan="N" で被せる
| 名前 | Aプロジェクト |
|---|---|
| 関連リンク | リンクテキスト |
| タグ A | |
| タグ B | |
| タグ C |
使用例 — td 内に任意の UI
td にバッジ、ボタン、リンク等を入れられる
| ステータス | 公開中 |
|---|---|
| 優先度 | 高 |
| 担当者 | 山田 太郎 |
| アクション |
機能
このコンポーネントの用途
キー/値形式の縦長テーブル。1 件の詳細表示に使う。
複数データの比較なら simple-table ではなく data-table。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓左列 <th>（ラベル）、右列 <td>（値）。連続ラベルは rowspan でまとめられる。
NG
- ✕複数件の比較に使わない → data-table。
- ✕罫線・余白を直書きしない → .simple-table の既定を使う。
1 件の属性は simple-table・複数件の比較は table
用途の使い分け| 担当者 | 山田 太郎 |
|---|---|
| 作成日 | 2026-08-01 |
1 件の属性を「項目名＝行見出し（th）／内容（td）」で縦に並べる。
<table class="simple-table"> <tr><th scope="row">担当者</th><td>山田 太郎</td></tr> </table>
| 案件A | 公開中 |
|---|---|
| 案件B | 審査中 |
| 案件C | 下書き |
複数件の比較を simple-table で縦に並べない → 列で比較できる table が適切。
<!-- 複数件の比較は data-table を使う --> <table class="data-table"><thead><tr><th scope="col">案件</th>…</table>
シンプルテーブルのアクセシビリティ
「項目名＝行見出し <th scope="row">／内容＝td」の 2 列表です。表に名前を付け、rowspan の対応関係が崩れないよう注意します。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
左の項目名（行見出し）と右の内容を視覚的に区別。値が無い項目は明示的に示す。
rem / トークンで拡大に追従。内容列は伸縮し、長文でも折り返す。
表自体は非対話。セル内のリンク・ボタンが操作対象で、Tab で辿れる。
項目名を <th scope="row"> にすると、各内容セルが「項目名: 値」として読まれる。caption／aria-label で表に名前を付ける。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
<table>／<th>／<td>のセマンティック構造 - ✓行見出し列（
th・128px 固定）と内容列（td・伸縮）の区別 - ✓本文・見出しのコントラストを確保、reflow に耐える余白
実装時の必須対応
プロダクト側で担保する
- !項目名の
<th>にscope="row"を付ける - !表に
<caption>かaria-labelで名前を付ける - !
rowspanでまとめる場合、行見出しと内容の対応が崩れないか SR で確認する - !値が無い項目は空欄でなく
—等で明示する
テスト方法
スクリーンリーダー / 自動チェック
- SR各内容セルで対応する項目名（行見出し）が読まれる（「担当者、山田 太郎」）
- 操作セル内のリンク・ボタンが Tab で辿れる
- 自動axe / Lighthouse で
th／scope="row"・caption・コントラストを確認
項目名は th scope="row"
達成基準：WCAG 1.3.1 情報及び関係性
| 担当者 | 山田 太郎 |
|---|---|
| 状態 | 進行中 |
項目名を th scope="row"、表名を caption。「担当者: 山田 太郎」と読まれる。
<table class="simple-table"> <caption class="sr-only">プロジェクト情報</caption> <tr><th scope="row">担当者</th><td>山田 太郎</td></tr> </table>
| 担当者 | 山田 太郎 |
| 状態 | 進行中 |
項目名も td にすると、どちらが項目名か SR に伝わらず対応関係が失われる。
<tr><td>担当者</td><td>山田 太郎</td></tr> <!-- th/scope なし -->