テーブル／Table

テーブルヘッダーとテーブルデータで構成されます。
テーブルデータでは一部のコンポーネントを内包して表示することができます。


<div class="c-table">
  <table class="c-table__content">
    <caption class="c-table__caption">テーブルキャプション</caption>
    <thead class="c-table__head">
      <tr>
        <th>テーブルヘッダー</th>
        <th>テーブルデータ</th>
        <th>テーブルデータ</th>
      </tr>
    </thead>
    <tbody class="c-table__body">
      <tr>
        <td>テーブルヘッダー</td>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <td>テーブルヘッダー</td>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <td>テーブルヘッダー</td>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
    </tbody>
  </table>
</div>

原則

どのブレイクポイントでも同じレイアウトで表示します。
表示領域に収まらない場合、初期表示は左揃えになり、横スクロールで確認できます。
次のいずれかのテーブルヘッダーを使用してください。
- 行ヘッダー
- 列ヘッダー
- 行列ヘッダー
テーブルに内包できるコンポーネントは以下です。
- 段落
- 箇条書きリスト
- リンクリスト
必要に応じて、テーブルキャプションを追加できます。

パターン

ヘッダー位置の指定

<th>の配置を変更することで、ヘッダー位置の指定が可能です。

行ヘッダー表示


<div class="c-table">
  <table class="c-table__content">
    <caption class="c-table__caption">テーブルキャプション</caption>
    <thead class="c-table__head">
      <tr>
        <th>テーブルヘッダー</th>
        <th>テーブルデータ</th>
        <th>テーブルデータ</th>
      </tr>
    </thead>
    <tbody class="c-table__body">
      <tr>
        <td>テーブルヘッダー</td>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <td>テーブルヘッダー</td>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <td>テーブルヘッダー</td>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
    </tbody>
  </table>
</div>

列ヘッダー表示


<div class="c-table">
  <table class="c-table__content">
    <caption class="c-table__caption">テーブルキャプション</caption>
    <tbody class="c-table__body">
      <tr>
        <th class="c-table__headCell">テーブルヘッダー</th>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <th class="c-table__headCell">テーブルヘッダー</th>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <th class="c-table__headCell">テーブルヘッダー</th>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <th class="c-table__headCell">テーブルヘッダー</th>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
    </tbody>
  </table>
</div>

行列ヘッダー表示


<div class="c-table">
  <table class="c-table__content">
    <caption class="c-table__caption">テーブルキャプション</caption>
    <thead class="c-table__head">
      <tr>
        <th>テーブルヘッダー</th>
        <th>テーブルデータ</th>
        <th>テーブルデータ</th>
      </tr>
    </thead>
    <tbody class="c-table__body">
      <tr>
        <th class="c-table__headCell">テーブルヘッダー</th>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <th class="c-table__headCell">テーブルヘッダー</th>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
      <tr>
        <th class="c-table__headCell">テーブルヘッダー</th>
        <td>テーブルデータ</td>
        <td>テーブルデータ</td>
      </tr>
    </tbody>
  </table>
</div>