テーブル／データテーブル（使い方）
コンポーネント要素
- テーブルヘッダー
- ヘッダーセル
- データセル
- フロントアイコン
- テールアイコン
- エンドアイコン
外観
サイズ
- テーブルの用途に応じてDefaultまたはDenseを選択してください。 一覧性が重要な用途や、画面領域を有効に活用したい場合にはDenseを選択できます。
- ただし、タッチインタフェースが想定される際には、Denseだと狭くて操作が難しい場合があることに留意してください。
テーブルヘッダー、ヘッダーセル
- テーブルヘッダーとデータセルは黒いボーダーで明確に区切り、ヘッダーセルのテキストは太字にしてください。 これにより、ヘッダーセルとデータセルを視覚的に判別できるようにします。
セルの結合
- セルの結合は最小限にしてください。 セルが複雑に結合されると、データの再利用が難しくなります。
ストライプ表示
- 必要に応じて、行および列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。
- hover時のハイライト表示は、「ふるまい > hoverハイライト」を参照してください。
テーブルの幅がコンテンツ幅よりも大きい場合
- テーブルで表現している内容に応じて、テーブルの領域内で横スクロールするか、ページ全体を横スクロールするかを選択してください。
- モバイルではテーブルの領域内での横スクロールとします。 スクロール可能な領域には、スクロールを促すシャドーを表示してください。
コンテンツ
リンク
- セル単位でリンクできます。
- セルのリンクが1つの場合は、セル全体をリンク領域にしてください。 ターゲットサイズが広がり使い勝手を高めます。
- セルのリンクが2つ以上の場合は、文字列ごとのリンクとします。 セル全体をリンク領域にすることはできません。
- リンクの表示は、リンクテキストと同じ表現（下線付き青テキスト）です。 ただし、テーブルの大きさ等に応じて、下線なし青テキストまたは下線付き黒テキストで表現することもできます。
- 行全体をリンクにすることはできません。
シンプルに作る
テーブルの構造をできるだけシンプルに保ってください。 複雑なテーブルは、データの理解や再利用を難しくし、特にスクリーンリーダーユーザーにとって操作が困難になります。
テーブルをシンプルに作るために、以下の点に注意してください。
- 単なる名前–値のペアの並びにテーブルを使用しない
- セルの結合を最小限にする
- セルに複数の情報を詰め込まない
- 1レコード（データ単位）を複数行に分割しない
- テーブルを入れ子にしない
参考情報
ふるまい
hoverハイライト
マウスカーソルが乗った行または列をHoverハイライトで表示できます。
行の選択
行の先頭にあるチェックボックスで行の選択ができます。 選択された行はSelectedハイライトで表示してください。
全ての行を選択する
テーブルヘッダーの先頭に「全て選択」チェックボックスを追加できます。
テーブル内で選択されたアイテムと選択されていないアイテムが混在している場合、「全て選択」チェックボックスはindeterminateプロパティを利用したチェックボックス表示になります。この状態で「全て選択」チェックボックスを選択した場合、全て選択が実行されます。
アクションを持つテーブルヘッダー
テーブルヘッダーには、以下のアクションを実装できます。
並び替え（ソート）
クリックした列で並び替えを行います。
- ソート可能な列のテキストを下線つきで表示します。
- 上向き矢印アイコン（昇順）または下向き矢印アイコン（降順）を使って並び順を表示します。
- テキストおよびテールアイコンをクリッカブルエリアにしてください。
縦三点リーダーメニュー
列に対する追加アクションを選択するメニューを格納できます。
- エンドアイコンとして縦三点リーダーを追加します。
- クリックするとメニューリストボックス等が展開します。
- キーボード操作等のインタラクションはARIA Authoring Practices GuideのMenu Button Patternに準ずるものとします。