データテーブル
Data table
別名: テーブル、データグリッド、Data grid、Table、Grid view
生態（さわってみる）
| ワイヤレスイヤホン | ¥8,800 | 42 | 2026-07-02 |
| メカニカルキーボード | ¥15,400 | 7 | 2026-08-01 |
| モバイルバッテリー | ¥3,200 | 120 | 2026-06-18 |
| 4Kモニター | ¥42,000 | 3 | 2026-08-10 |
| デスクライト | ¥5,600 | 65 | 2026-05-27 |
一言定義
行と列で構成されたデータを一覧表示し、並び替えなどの操作を伴うことが多い表形式の表示UI。
分類
使う場面
- 属性が多い項目同士を横並びで比較・走査させたいSaaSダッシュボードや管理画面
- 並び替え・絞り込みなど、データ操作を伴う一覧を扱うとき
避ける場面
- 画像が主役で、1件ごとの独立性を出したいとき（→カード）
- モバイル幅で列数が多く、横スクロールが常態化してしまうとき
近縁種との比較
同じ一覧データでも、カードが「1件=1枚の面」として独立性・視認性を優先するのに対し、データテーブルは行と列を揃えることで属性同士の横断的な比較・走査を優先する点で使い分けられ、画像が主役のコンテンツにはカード、数値や状態を多列で比較させたいSaaS管理画面にはデータテーブルが向く。階層構造を持つデータについては、フラットな行の集合であるデータテーブルよりも、親子関係を開閉できるツリービューの方が適している。
実例リンク
アクセシビリティ
- role
- table + caption。並び替え可能な列見出しに aria-sort="none | ascending | descending"
- キーボード操作
- 列見出しのボタンをTabで移動、Enter/Spaceで並び替えを実行
- 補足
- 並び替え結果の変化は列見出しのaria-sort更新自体でスクリーンリーダーに伝わる。ゼブラ（縞模様）は装飾でありCSSのみで実装し、意味情報としては扱わない