Table

Left (Default)

左揃えのテーブルセルです。

Center

中央揃えのテーブルセルです。

Right

中央揃えのテーブルセルです。

Xs

最も小さなサイズのテーブルセルです。文字列のみなどのコンテンツを扱う際に使用します。

Sm (Default)

デフォルトのテーブルセルのサイズです。smが最も使用されるサイズです。他のサイズのテーブルセルはsmを基準に重要度に応じて使用します。

Md

smの次に大きなサイズのテーブルセルです。Slotなどで大きな要素を配置する際に使用します。

Text (Default)

テキスト要素を配置するためのデフォルトのオプションです。

Checkbox

チェックボックスを挿入するためのオプションです。
チェックボックスは列の先頭に配置します。

Slot

任意のコンポーネントを挿入するためのオプションです。

テーブル要素のサイズに対してテーブルデータが超過する場合において、ヘッダーは固定され、テーブルデータ要素はスクロール可能な状態へと変化します。

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 40px
• padding Vertical: 16px
• padding Horizontal: 8px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 56px
• padding Vertical: 16px
• padding Horizontal: 8px

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• Container Height: 80px
• padding Vertical: 16px
• padding Horizontal: 12px

テーブルには既に行を区切るための線があります。行の視認性を向上させる目的で背景色を交互に入れ替えないでください。

テーブルには既にセル同士の区分を明らかにするための余白があります。カラムをグルーピングする以外の目的で列を区分する線を付与しないでください。

階層構造があるデータを表現するためにテーブルを使用しないでください。別の表現を検討してください。

定数 (日にちなど) ではない、比較をする必要がある数値には等幅フォント (monospace) を使用します。

数値同士を比較する必要がある場合は可変幅フォント (proportional) を使用しないでください。数字ごとに幅が変わるため、可視性が低下します。

比較の必要がある数値は右揃えにします。算術的に比較や結合ができない値 (郵便番号, 電話番号など)は数値であっても右揃え対象外です。

比較の必要がある数値は左揃えや中央揃えにしないでください。

テキストデータは行頭を揃えるために左揃えにします。

テキストデータは中央揃えや右揃えに整列させないでください。行頭が揃わないため、視認性が低下します。

セルに値が存在しない場合は存在しない理由を記述します。

セルに値が存在しない場合に空白やハイフンなどでデータが空であることを表現しないでください。ハイフンや空白は適切に読み上げが行われないため、使用を避けます。

1つのセルの中に複数のデータを挿入しないでください。挿入可能なデータは1つのセルに対して1つまでです。
例外的に複数のデータを挿入する場合はヘッダーのラベルに即した要素に限定して配置します。