HTMLタグ/テーブルタグ/見出しの対象範囲を指定する

<th scope=""></th>

ブラウザ: 非視覚系のブラウザ向け
要素: th要素; td要素

th要素やtd要素に scope="" を追加すると、見出しの対象範囲を指定することができます。

この属性で示された情報は、音声ブラウザなどで役立てられることになります。


<th scope="col">見出しセル</th>

属性	値	説明
scope=""	row	行方向（横列）のセルを対象にする
	col	列方向（縦列）のセルを対象にする
	rowgroup	行グループ内のセルを対象にする
	colgroup	列グループ内のセルを対象にする

この属性を指定することで、それがどのデータに対する見出しなのかを明確に示すことができます。

row … そのセルが、横列に対する見出しであることを示します。
col … そのセルが、縦列に対する見出しであることを示します。
rowgroup … そのセルが、行グループ（thead、tfoot、tbody）に対する見出しであることを示します。
colgroup … そのセルが、列グループ（colgroup）に対する見出しであることを示します。

headers属性とscope属性は同じ機能を持ちます（見出しとデータセルとを関連付けます）。複雑な表の場合（個別に関連付ける場合）はheaders属性を使用し、単純な表の場合（一括で関連付ける場合）はscope属性を使用します。

使用例

■行方向（横列）のセルを対象にする


<table border="3">
<tr>
<th scope="row">見出しセル1</th>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<th scope="row">見出しセル2</th>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<th scope="row">見出しセル3</th>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>

表示例

見出しセル1	データセル1-1	データセル1-2	データセル1-3
見出しセル2	データセル2-1	データセル2-2	データセル2-3
見出しセル3	データセル3-1	データセル3-2	データセル3-3

■列方向（縦列）のセルを対象にする


<table border="3">
<tr>
<th scope="col">見出しセル1</th>
<th scope="col">見出しセル2</th>
<th scope="col">見出しセル3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
</tr>
<tr>
<td>データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
</tr>
<tr>
<td>データセル1-3</td>
<td>データセル2-3</td>
<td>データセル3-3</td>
</tr>
</table>

表示例

見出しセル1	見出しセル2	見出しセル3
データセル1-1	データセル2-1	データセル3-1
データセル1-2	データセル2-2	データセル3-2
データセル1-3	データセル2-3	データセル3-3

■列方向（縦列）のセルを対象にする + 行方向（横列）のセルを対象にする


<table border="3">
<tr>
<th scope="col">見出しセル1</th>
<th scope="col">見出しセル2</th>
<th scope="col">見出しセル3</th>
</tr>
<tr>
<td scope="row">データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
</tr>
<tr>
<td scope="row">データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
</tr>
<tr>
<td scope="row">データセル1-3</td>
<td>データセル2-3</td>
<td>データセル3-3</td>
</tr>
</table>

表示例

見出しセル1	見出しセル2	見出しセル3
データセル1-1	データセル2-1	データセル3-1
データセル1-2	データセル2-2	データセル3-2
データセル1-3	データセル2-3	データセル3-3

上記の例では、各行の最初のデータセル（1-1、1-2、1-3）を、行方向（右方向）に対する見出のように機能させています。

具体的なデータを入れると次のようになります。

商品名	価格	販売数
商品A	2,000円	2,500個
商品B	1,800円	2,750個
商品C	1,500円	3,200個

各行の商品名は、データであると同時に見出しとしても扱われます。

■行グループ内のセルを対象にする


<table border="3">

<tbody>
<tr>
<th rowspan="2" scope="rowgroup">グループA</th>
<th scope="row">見出しセル1</th>
<td>データセル1-1</td>
<td>データセル1-2</td>
</tr>
<tr>
<th scope="row">見出しセル2</th>
<td>データセル2-1</td>
<td>データセル2-2</td>
</tr>
</tbody>

<tbody>
<tr>
<th rowspan="2" scope="rowgroup">グループB</th>
<th scope="row">見出しセル3</th>
<td>データセル3-1</td>
<td>データセル3-2</td>
</tr>
<tr>
<th scope="row">見出しセル4</th>
<td>データセル4-1</td>
<td>データセル4-2</td>
</tr>
</tbody>

</table>

表示例

グループA	見出しセル1	データセル1-1	データセル1-2
グループA	見出しセル2	データセル2-1	データセル2-2
グループB	見出しセル3	データセル3-1	データセル3-2
グループB	見出しセル4	データセル4-1	データセル4-2

■列グループ内のセルを対象にする


<table border="3">

<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>

<tr>
<th colspan="2" scope="colgroup">グループA</th>
<th colspan="2" scope="colgroup">グループB</th>
</tr>
<tr>
<th scope="col">見出しセル1</th>
<th scope="col">見出しセル2</th>
<th scope="col">見出しセル3</th>
<th scope="col">見出しセル4</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
<td>データセル4-1</td>
</tr>
<tr>
<td>データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
<td>データセル4-2</td>
</tr>

</table>

表示例

グループA		グループB
見出しセル1	見出しセル2	見出しセル3	見出しセル4
データセル1-1	データセル2-1	データセル3-1	データセル4-1
データセル1-2	データセル2-2	データセル3-2	データセル4-2

サイト内検索

テーブルタグ

見出しの対象範囲を指定する