テーブル

テーブル（ボーダー）

テーブル（ボーダー）のコンポーネントにはsu-table-borderのクラス名を付与します。

table要素など表組みを構成する要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。表の各行に下罫線が付与され、セル内に余白が付与されます。また、幅は親要素のサイズにあわせて広がります。

各行に下罫線がついた表組みとして表示します。

<table 
  class="su-table-border" 
  role="table" 
  aria-label="****のデータテーブル" 
  aria-describedby="table_description"
>
  <caption id="table_description">
    表組みキャプション
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">表ヘッダー見出し1</th>
      <th scope="col" role="columnheader">表ヘッダー見出し2</th>
      <th scope="col" role="columnheader">表ヘッダー見出し3</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表見出し</th>
      <td role="cell">表データ1</td>
      <td role="cell">表データ2</td>
    </tr>
    ...
  </tbody>
  <tfoot role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表フッター見出し</th>
      <td role="cell">表フッターデータ1</td>
      <td role="cell">表フッターデータ2</td>
    </tr>
  </tfoot>
</table>

罫線の色はCSS変数を使って変更することが可能です。

.su-table-border {
  --su-color-border-table: red;
}

テーブル（ボーダー＆塗り）

テーブル（ボーダー＆塗り）のコンポーネントにはsu-table-fillのクラス名を付与します。

table要素など表組みを構成する要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。各セルに罫線が付与され、見出しセル内に背景色と各セル内に余白が付与されます。また、幅は親要素のサイズにあわせて広がります。

見出しセル内に背景色と各セルに罫線がついた表組みとして表示します。

<table 
  class="su-table-fill"
  role="table" 
  aria-label="****のデータテーブル" 
  aria-describedby="table_description"
>
  <caption id="table_description">
    表組みキャプション
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">表ヘッダー見出し1</th>
      <th scope="col" role="columnheader">表ヘッダー見出し2</th>
      <th scope="col" role="columnheader">表ヘッダー見出し3</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表見出し</th>
      <td role="cell">表データ1</td>
      <td role="cell">表データ2</td>
    </tr>
    ...
  </tbody>
  <tfoot role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表フッター見出し</th>
      <td role="cell">表フッターデータ1</td>
      <td role="cell">表フッターデータ2</td>
    </tr>
  </tfoot>
</table>

ヘッダセルの背景色、ならびに罫線の色はCSS変数を使って変更することが可能です。

.su-table-fill {
  --su-color-border-table: red;
  --su-color-fill-table: pink;
}

テーブル（ストライプ）

テーブル（ストライプ）のコンポーネントにはsu-table-stripeのクラス名を付与します。

table要素など表組みを構成する要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。テーブル本体要素に含まれる各行に対して交互に背景色が、上下に罫線が付与され、各セル内に余白が付与されます。また、幅は親要素のサイズにあわせて広がります。

テーブル本体の各行に対して交互に背景色がついた表組みとして表示します。

<table 
  class="su-table-stripe"
  role="table" 
  aria-label="****のデータテーブル" 
  aria-describedby="table_description"
>
  <caption id="table_description">
    表組みキャプション
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">表ヘッダー見出し1</th>
      <th scope="col" role="columnheader">表ヘッダー見出し2</th>
      <th scope="col" role="columnheader">表ヘッダー見出し3</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表見出し</th>
      <td role="cell">表データ1</td>
      <td role="cell">表データ2</td>
    </tr>
    ...
  </tbody>
  <tfoot role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表フッター見出し</th>
      <td role="cell">表フッターデータ1</td>
      <td role="cell">表フッターデータ2</td>
    </tr>
  </tfoot>
</table>

セルの背景色（奇数行、偶数行）ならびに罫線の色はCSS変数を使って変更することが可能です。

.su-table-fill {
  --su-color-border-table: red;
  --su-color-stripe-odd-table: gray;
  --su-color-stripe-even-table: white;
}

レスポンシブテーブル

レスポンシブテーブルのコンポーネントにはsu-table-wrap-responsiveのクラス名を対象となるtable要素をラップする要素に対して付与します。

div要素でtable要素の親要素となるようにマークアップします。上記クラス名を付与し、その子要素となるtable要素に対して、--su-min-width-responsive-tableのCSS変数、もしくはmin-widthプロパティやwidthプロパティで固定値の幅を設定することで、親要素の幅をテーブル要素が超えた場合に横スクロールで表示されるようになります。

行列が多いテーブルをモバイルデバイスなど小さい画面で表示させる時に効果的です。

<div class="su-table-wrap-responsive">
  <table 
    class="su-table-fill" 
    style="--su-min-width-responsive-table: 1000px;"
  >
    ...
  </table>
</div>

サイズバリエーション

各テーブルコンポーネントは、クラス名を追加することでセル間の余白やテーブル要素内の文字サイズを調整することができます。su-table-size-smallのクラス名を付与することで、セル間の余白を狭め、文字サイズが小さくなったコンパクトな表組みを作ることができます。また、su-table-size-largeのクラス名を付与すると、セル間の余白を広げて、文字サイズも大きくなった表組みとなります。

<!-- サイズ小 -->
<table class="su-table-fill su-table-size-small">
  ...
</table>

<!-- サイズ大 -->
<table class="su-table-fill su-table-size-large">
  ...
</table>

等幅カラム

各テーブルコンポーネントのカラム幅は個別で幅を設定しない場合、通常はセル内の内容に合わせて自動的に調整されます。su-table-column-fixedのクラス名を追加で付与することで、各セルサイズの幅を均等にし、等幅カラムの表組みを作成できます。

<!-- 等幅カラム -->
<table class="su-table-fill su-table-column-fixed">
  ...
</table>

セル内の整列

各種テーブルのコンポーネント内にある、ヘッダセル（th要素）やデータセル（td要素）に対して、su-table-cell-[POSITION]クラスを付与することで、垂直方向の整列を指定することができます。ポジションはtop、middle、bottomのいずれかをサフィックスとすることで、ポジションに対応した位置に揃えてセル内のデータを表示します。

※この指定はテーブルコンポーネントとして定義されている要素（su-table-border、su-table-fill、su-table-stripeのいずれかのクラスが設定されている）に対して有効です。
※各種コンポーネントのセル内の整列はデフォルトで上揃えになっています。

<table class="su-table-fill">
  ...
  <tr>
    <th class="su-table-cell-top">表見出し（上揃え）</th>
    <td class="su-table-cell-top">表データ（上揃え）</td>
  </tr>
  <tr>
    <th class="su-table-cell-middle">表見出し（中央揃え）</th>
    <td class="su-table-cell-middle">表データ（中央揃え）</td>
  </tr>
  <tr>
    <th class="su-table-cell-bottom">表見出し（下揃え）</th>
    <td class="su-table-cell-bottom">表データ（下揃え）</td>
  </tr>
  ...
</table>

アクセシビリティの支援

テーブルのコンポーネントではアクセシビリティの対応として、aria-label属性を用いて表組みの情報を追加することで、スクリーンリーダー使用時にもテーブルの内容を適切に伝えることができます。合わせてid属性が指定されたcaption要素を使い、aria-describedby属性で紐づけることで、詳細な説明文を明示することでより伝わりやすくなります。

テーブル内部の要素についてはrole属性を用いて、各行列のセルとデータの関連性を明示することで、テーブル内の構造がより明確になります。

<table 
  class="su-table-border" 
  role="table" 
  aria-label="****のデータテーブル" 
  aria-describedby="table_description"
>
  <caption id="table_description">
    表組みキャプション
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">表ヘッダー見出し1</th>
      <th scope="col" role="columnheader">表ヘッダー見出し2</th>
      <th scope="col" role="columnheader">表ヘッダー見出し3</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表見出し</th>
      <td role="cell">表データ1</td>
      <td role="cell">表データ2</td>
    </tr>
    ...
  </tbody>
  <tfoot role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">表フッター見出し</th>
      <td role="cell">表フッターデータ1</td>
      <td role="cell">表フッターデータ2</td>
    </tr>
  </tfoot>
</table>