UI Component Labデータ表示
Table テーブル
データを行と列に並べ、列ごとに見出しを付けた表。
デモ
| プラン | 容量 | |
|---|---|---|
| 無料 | 0円 | 5 GB |
| チーム | 1,800円 | 1 TB |
| 個人 | 600円 | 100 GB |
別名
- Data table — Carbon Design System
- テーブル／データテーブル — デジタル庁デザインシステム
見分けるポイント
太字の見出し行が上にあり、線で区切られたセルが並ぶ。数値は右揃えにすることが多い。
バリエーション
- データグリッド
- セルを編集・選択できる表で、矢印キーでセル間を移動するもの。
挙動
- セル自体は操作できない。スクリーンリーダーはセルを移動するとき、対応する列と行の見出しを読み上げる。
- 並べ替えできる列は見出しにボタンを置き、aria-sort で並び順を伝える。
- ネイティブの <table>・<caption>・<th scope> を使えば、ARIA を足さずに構造が伝わる。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | 表の中の操作できる要素（並べ替えボタンなど）の間だけを移動する。 |
| Enter / Space | 並べ替えボタンで、昇順と降順を切り替える。 |
使い分け・注意点
- レイアウトの目的や、項目名と値の組には使わない。項目名と値の組には説明リストを使う。
似た部品との違い
- リスト（箇条書きリスト）: テーブルは1行の複数の値を列で比べ、リストは列を持たずに1行に1項目を並べる。
- 説明リスト: テーブルは行と列で値を比べ、説明リストは1つの対象について項目名と値の組を並べる。
出典
- WAI-ARIA APG: Table Pattern (最終確認日: )
- WAI-ARIA APG: Grid Pattern (最終確認日: )
- Carbon Design System: Data table (最終確認日: )
- デジタル庁デザインシステムウェブサイト「テーブル／データテーブル」をもとに作成 (最終確認日: )