<th scope=""></th>

ブラウザ 非視覚系のブラウザ向け
分類 ---
要素

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

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


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

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

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

使用例

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

<table border="3">
<tr>
<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>
<tr>
<th scope="row">見出し3</th>
<td>データ3-1</td>
<td>データ3-2</td>
</tr>
</table>
表示例
見出し1 データ1-1 データ1-2
見出し2 データ2-1 データ2-2
見出し3 データ3-1 データ3-2
列方向（縦列）のセルを対象にする

<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>
</table>
表示例
見出し1 見出し2 見出し3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2
列方向（縦列）のセルを対象にする + 行方向（横列）のセルを対象にする

<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
見出し2 データ2-1 データ2-2
グループB 見出し3 データ3-1 データ3-2
見出し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