【HTML】scope属性でヘッダーセルとセルの関係性を定義する

このページについて

このページではHTMLのscope属性の使い方を解説しています。

scopeはtableタグの中で使用する、thタグで使用します。それ以外のタグでは使用しません。

thタグは「テーブルのヘッダーセル」の役割を持ちますが、そのヘッダーセルがどこのセルの列や行に対してのヘッダーなのかというのをまとめて定義するのが、今回のscopeとなります。

scopeはthタグで使用します。

<table>
<tr><th scope="row">ヘッダー1</th><th scope="row">ヘッダー2</th></tr>
<tr><td>A</td><td>B</td></tr>
</table>

このソースコードの場合は以下のような表示になります。

ヘッダー1	ヘッダー2
A	B

そしてscopeでrowを指定しているため、縦方向の列に対してのヘッダーですよっていう定義の仕方になります。この場合、Aの列のヘッダーがヘッダー1であり、Bの列のヘッダーがヘッダー2という意味になります。

横方向の場合はcolを使用します。

<table>
<tr><th scope="col">ヘッダー1</th><td>A</td></tr>
<tr><th scope="col">ヘッダー2</th><td>B</td></tr>
</table>

ヘッダー1	A
ヘッダー2	B

この場合は横方向の行に対して、それぞれのヘッダーですよっていう定義の仕方になります。

指定の方法にはcolgroupやrowgroupのようなグループ指定の方法もあります。こちらはそれぞれの行や列を1つのグループとしてまとめて扱う時に使用します。なのでcolgroupタグを使用した場合に簡単に関連付けることができるようになります。

<table>
<colgroup span="2"></colgroup>
<tr><th sope="colgroup">部品名</th><th sope="colgroup">個数</th></tr>
<tr><td>○</td><td>×</td></tr>
</table>

このようにグループを設定した場合は以下のようになります。

部品名	個数
○	×

見た目は一切変わっていませんが、スクリーンリーダーを使用している方にとってはあると便利な機能だったりします。