HTMLのidとheaders属性で多段見出しテーブルを設計する方法｜初心者向け完全ガイド

2. 単純なidとheadersの使い方

2. 単純なidとheadersの使い方

まずは簡単な例で、1行1列の見出しにidをつけてデータセルと結びます。

<table border="1">
  <tr>
    <th id="name">名前</th>
    <th id="age">年齢</th>
  </tr>
  <tr>
    <td headers="name">山田太郎</td>
    <td headers="age">25</td>
  </tr>
  <tr>
    <td headers="name">佐藤花子</td>
    <td headers="age">30</td>
  </tr>
</table>

このようにidを見出しに付けて、データセルにheadersで指定するだけで、簡単にアクセシブルな表が作れます。

3. 多段見出しのテーブル例

3. 多段見出しのテーブル例

複数行・複数列の見出しがある場合も、idとheadersを使って結びます。

<table border="1">
  <tr>
    <th id="category" rowspan="2">カテゴリ</th>
    <th id="year2024" colspan="2">2024年</th>
    <th id="year2025" colspan="2">2025年</th>
  </tr>
  <tr>
    <th id="q1">Q1</th>
    <th id="q2">Q2</th>
    <th id="q1_25">Q1</th>
    <th id="q2_25">Q2</th>
  </tr>
  <tr>
    <td headers="category">食品</td>
    <td headers="year2024 q1">100</td>
    <td headers="year2024 q2">150</td>
    <td headers="year2025 q1">200</td>
    <td headers="year2025 q2">250</td>
  </tr>
  <tr>
    <td headers="category">飲料</td>
    <td headers="year2024 q1">80</td>
    <td headers="year2024 q2">120</td>
    <td headers="year2025 q1">160</td>
    <td headers="year2025 q2">210</td>
  </tr>
</table>

この例では、行見出し「カテゴリ」と列見出し「年」と「四半期」をheadersで指定して、データがどの見出しに対応するかを明確にしています。

4. 複雑なテーブルでもアクセシブルにするポイント

4. 複雑なテーブルでもアクセシブルにするポイント

複雑な表では、headers属性に複数のidをスペース区切りで指定できます。これにより、行見出しと列見出しの両方を正しく結び付けられます。

<td headers="category year2024 q2">150</td>

スクリーンリーダーは、このデータセルが「食品」の「2024年」の「Q2」に対応することを正確に読み上げます。

5. 実務でのidとheadersの活用例

5. 実務でのidとheadersの活用例

例えばECサイトの売上レポートや学校の成績表など、表の行と列が多いデータでは、idとheadersを正しく設定することでアクセシビリティを大幅に向上できます。画面リーダーを使うユーザーも、どのデータがどの見出しに属するか混乱せずに理解できます。

<td headers="student math midterm">85</td>
<td headers="student math final">90</td>
<td headers="student english midterm">78</td>
<td headers="student english final">82</td>

6. 見出しにidをつけるときの注意点

6. 見出しにidをつけるときの注意点

idはページ内で一意である必要があります。同じidを複数のthタグに付けると、headersで結んでも正しく読み上げられません。必ず一つの見出しに対して一つのidを付けましょう。

<th id="productA">商品A</th>
<th id="productB">商品B</th>

7. headers属性の活用でSEOも向上

7. headers属性の活用でSEOも向上

headers属性を使うことで、検索エンジンも表の構造を正確に理解できます。行と列の関連が明確になるので、検索結果に表の内容が適切に反映されやすくなり、SEO効果も期待できます。

8. 最後に実践のポイント

8. 最後に実践のポイント

• 見出しには必ずidを付ける
• データセルにはheadersで対応する見出しを指定
• 複数見出しがある場合はスペースで区切って指定
• idはページ内で一意にする
• アクセシビリティとSEOを同時に考えてテーブル設計する

この手順を守ることで、誰でも見やすく、読み上げ対応が可能な多段見出しテーブルを作ることができます。

まとめ

まとめ

本記事では、HTMLのid属性とheaders属性を活用した多段見出しテーブルの設計方法について詳しく解説しました。多段見出しテーブルは、行や列に複数の見出しが存在する複雑な表で、データセルがどの見出しに属するかを明確に示す必要があります。id属性は各見出しセルに一意の識別子を付けるために使用し、headers属性はデータセルがどの見出しに対応するかを指定するために使います。これにより、スクリーンリーダーを使用するユーザーもデータの意味を正確に理解でき、アクセシビリティが向上します。

単純なテーブルでは、idを見出しに付け、データセルにheadersで対応するidを指定するだけで十分です。しかし、複数行・複数列の見出しを持つ多段見出しテーブルでは、データセルに複数のidをスペースで区切って指定する必要があります。例えば、年度ごとの四半期売上をカテゴリ別に表示する場合、行見出しと列見出しの両方を正確にheadersで結びつけることで、ユーザーがどのデータがどの項目に対応するか迷うことなく理解できます。

また、実務での活用例としてはECサイトの売上レポートや学校の成績表など、データが多く複雑な表で非常に有効です。headers属性を正しく設定することで、スクリーンリーダーが正確にデータの意味を伝えるだけでなく、検索エンジンも表構造を正確に理解できるため、SEO面でも効果があります。特に、行見出しと列見出しが明確な表は、検索結果において表内容が正しく反映されやすくなります。

さらに、見出しに付与するidはページ内で一意であることが重要です。同じidを複数のthタグに付けてしまうと、headersで結んでも正しく読み上げられません。また、複数の見出しに対応する場合は、headers属性にidをスペース区切りで記述することで、複雑な表でもアクセシブルに設計できます。実務でのテーブル設計においては、アクセシビリティとSEOの両方を意識してidとheaders属性を活用することが最適です。

まとめると、id属性とheaders属性を適切に活用することで、複雑な多段見出しテーブルも読みやすく、スクリーンリーダー対応が可能なアクセシブルな表を作ることができます。これにより、全てのユーザーがデータの意味を正しく理解できるだけでなく、検索エンジンにも表構造を正確に伝えられます。