HTML Living Standard/table

table 要素

<table> 要素は、表形式のデータを構造的に表現するために使用されます。行と列の形式でデータを配置することで、情報を視覚的に整理し、理解しやすくします。

基本構造

<table> 要素は、以下の子要素を内包することができます。これらの要素は表のさまざまな部分を定義します：

<caption>: 表のタイトルを指定します（オプション）。
<colgroup>: 列グループを定義します（オプション）。
<col>: 列のスタイルを指定します（オプション、通常は <colgroup> 内で使用）。
<thead>: 表のヘッダー行を定義します（オプション）。
<tbody>: 表の本文を定義します（必須ではありませんが、複数の行をグループ化するために推奨されます）。
<tfoot>: 表のフッター行を定義します（オプション）。
<tr>: 行を定義します（少なくとも1つ必要です）。
<td>: セルのデータを定義します（<tr> の子要素）。
<th>: ヘッダーセルを定義します（<tr> の子要素）。

以下は、<table> 要素を用いた基本的な例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Table Example</title>
  </head>
  <body>
    <table>
      <caption>サンプルの表</caption>
      <thead>
        <tr>
          <th>名前</th>
          <th>年齢</th>
          <th>職業</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>田中 太郎</td>
          <td>30</td>
          <td>エンジニア</td>
        </tr>
        <tr>
          <td>鈴木 花子</td>
          <td>25</td>
          <td>デザイナー</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">データは2025年時点</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

この例では、<table> 要素を用いてデータを整理し、タイトル (<caption>)、ヘッダー (<thead>)、本文 (<tbody>)、およびフッター (<tfoot>) を定義しています。

内包可能な子要素

以下に、<table> 要素が内包可能なすべての子要素を示します：

<caption>: 表全体の説明やタイトルを提供します。通常は、表の先頭に表示されます。
<colgroup>: 列のグループを定義します。列ごとにスタイルを適用するために使用されます。
- <col>: <colgroup> の中で使用され、列ごとのスタイル情報を指定します。
<thead>: 表のヘッダー行をグループ化します。
<tbody>: 表の本文をグループ化します。1つ以上の <tbody> を使用できます。
<tfoot>: 表のフッター行をグループ化します。フッター行は通常、集計や注釈に使用されます。
<tr>: 表の行を定義します。<thead>、<tbody>、および <tfoot> 内で使用されます。
- <td>: データセルを定義します。
- <th>: ヘッダーセルを定義します。

使用上の注意

セマンティクスを重視する構造
<thead>、<tbody>、および <tfoot> を適切に使用することで、表の構造がより明確になり、アクセシビリティも向上します。

整合性のあるデザイン

CSS を使用して表全体や個々のセルのスタイルをカスタマイズすることで、データをより見やすくすることができます。

例：

<table style="border: 1px solid black; width: fit-content;">
  <thead style="background-color: #f0f0f0;">
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫状況</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノートパソコン</td>
      <td>100,000円</td>
      <td>在庫あり</td>
    </tr>
  </tbody>
</table>

レスポンシブデザイン
小さな画面でも表が正しく表示されるようにするために、CSS グリッドやフレックスボックスを組み合わせて使用することが推奨されます。

アクセシビリティ

スクリーンリーダーや他の支援技術が正確にデータを解釈できるようにするため、以下を考慮してください：

<caption> 要素で表の説明を提供する。
<th> 要素を適切に使用し、必要に応じて scope 属性を追加する。