見出しセルの方向を定義

見出しセル方向を定義する必要性は？

HTMLではテキストだけではなく、音声や画像を使用することができ、中には音声ブラウザやスクリーンリーダーなどの技術を利用して情報を取得しているユーザーもいます。

これらのユーザーはテーブルの情報を取得するとき、行と列の見出しなどを意識する必要があります。そのため、テーブルの構成をわかりやすくするために、見出しの方向を定義する要素や属性を使用します。

<table>
<caption>見出しを横(行)方向に定義</caption>
<tr>
<th scope="row">見出しセルA</th>
<td>セルA-1</td><td>セルA-2</td>
</tr>
<tr>
<th scope="row">見出しセルB</th>
<td>セルB-1</td><td>セルB-2</td>
</tr>
<tr>
<th scope="row">見出しセルC</th>
<td>セルC-1</td><td>セルC-2</td>
</tr>
<tr>
<th scope="row">見出しセルD</th>
<td>セルD-1</td><td>セルD-2</td>
</tr>
</table>

<table>
<caption>見出しを縦(列)方向に定義</caption>
<tr>
<th scope="col">見出しセルA</th>
<th scope="col">見出しセルB</th>
<th scope="col">見出しセルC</th>
</tr>
<tr><td>セルA-1</td><td>セルB-1</td><td>セルC-1</td></tr>
<tr><td>セルA-2</td><td>セルB-2</td><td>セルC-2</td></tr>
<tr><td>セルA-3</td><td>セルB-3</td><td>セルC-3</td></tr>
</table>

@charset "utf-8";

table,,tr,th,td { border: solid 1px;}

テーブル 関連記事

• テーブルの基本
• テーブルの構成をグループ分け
• 見出しセルの方向を定義
• テーブルの列をグループ化
• テーブルのセルを結合