HTML講座 / caption・scope・セル結合で読みやすい表を作る

読みやすい表では、captionで表全体の内容を示し、thとscopeで値と見出しの関係を表します。colspanやrowspanによる結合は、データに必要な場合に使い、装飾だけを理由に複雑にしないことが大切です。

captionで表に題名を付ける

captionはtableの最初の要素として置き、表全体が何を示すかを説明します。近くに置いた通常の段落とは異なり、表の構造の一部です。対象期間や数値の測定方法が重要なら、題名や近くの説明にも条件を書きます。個々の行や列の名前は、別にthで示します。

scopeで見出しの方向を示す

列見出しはscope="col"、行見出しはscope="row"とします。例の「Monday」と「Morning」が交わる値は3人です。ここでの数値は構造説明用の架空のデータです。

<table>
  <caption>Visitors by day and time of day</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Morning</th>
      <th scope="col">Afternoon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Monday</th>
      <td>3 visitors</td>
      <td>5 visitors</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>4 visitors</td>
      <td>6 visitors</td>
    </tr>
  </tbody>
</table>

scopeは見出しとデータの関係を表すもので、セルを横へ並べたり色を変えたりする指定ではありません。単純な表では関係を推定できる場合もありますが、明示すると意図を確認しやすくなります。W3C WAIの表の解説に基本パターンがあります。

必要な場合だけセルを結合する

colspan="2"は二列、rowspan="2"は二行をまたぎます。次は午前と午後を共通の見出しでまとめる例です。colgroupで列のグループを定め、scope="colgroup"が何に対応するかを明確にしています。

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">Day</th>
    <th scope="colgroup" colspan="2">Visitors</th>
  </tr>
  <tr>
    <th scope="col">Morning</th>
    <th scope="col">Afternoon</th>
  </tr>
  <tr>
    <th scope="row">Monday</th>
    <td>3 visitors</td>
    <td>5 visitors</td>
  </tr>
</table>

日付の一列と、午前・午後の二列を分けて考えます。結合されたセルを通常のセル一個として数えると配置を間違えるため、結合が占める行列まで含めて確認してください。基本の行とセルは表の基本、複雑な見出しはW3C WAIの不規則な表見出しを参照できます。

見出しとの対応を点検する

任意の数値を指し、「何曜日のどの時間帯の値か」を答えられるか確認します。色や位置だけで判断させず、見出しとの構造的な対応を持たせます。判断しにくければ表を単純化したり、複数の表へ分けたりします。

狭い画面で内容が欠けないか、複雑な表では読み上げで関係を理解できるかも確認します。操作や読み順の確認はアクセシビリティの基本と組み合わせてください。