HTML thタグのscope属性を初心者向けに完全解説！行見出し・列見出しの指定方法

HTML thのscope属性とは？行見出し・列見出しの指定方法

先生と生徒の会話形式で理解しよう

生徒

「先生、HTMLのthタグって何ですか？」

先生

「thタグは、テーブルの中で見出しセルを表すタグです。表の列や行のタイトルになる部分ですね。」

生徒

「なるほど。でもscope属性って何ですか？」

先生

「scope属性は、thタグがどの範囲を見出しとして担当しているかを指定するための属性です。列見出しなのか、行見出しなのかを明示できます。」

生徒

「それを使うと何が良いんですか？」

先生

「スクリーンリーダーなど支援技術で、表の情報が正しく伝わるようになります。アクセシビリティの基本ですね。」

1. thタグとscope属性の基本

HTMLのthタグは、テーブルの見出しセルを作るために使用します。通常のtdタグはデータセルですが、thタグはその列や行が何の情報を表しているかを示す役割があります。scope属性を使うと、さらに明確に「これは列見出しか行見出しか」をブラウザや支援技術に伝えることができます。

2. scope属性の指定方法

scope属性には主に4種類があります。

col：このthは列見出しです
row：このthは行見出しです
colgroup：列のグループ見出し
rowgroup：行のグループ見出し

通常は、colとrowを使うことが多く、テーブルの構造をわかりやすくする基本です。

3. 列見出しを作る例

例えば、商品の名前と価格を表にする場合、上の行を列見出しにします。


<table border="1">
    <tr>
        <th scope="col">商品名</th>
        <th scope="col">価格</th>
    </tr>
    <tr>
        <td>ノートパソコン</td>
        <td>120,000円</td>
    </tr>
    <tr>
        <td>スマートフォン</td>
        <td>80,000円</td>
    </tr>
</table>

ブラウザ表示

この例では、thタグにscope="col"を付けることで「商品名」と「価格」が列の見出しであることを指定しています。

4. 行見出しを作る例

次に、左端の列を行見出しにする場合です。


<table border="1">
    <tr>
        <th></th>
        <th>月曜日</th>
        <th>火曜日</th>
    </tr>
    <tr>
        <th scope="row">朝食</th>
        <td>トースト</td>
        <td>シリアル</td>
    </tr>
    <tr>
        <th scope="row">昼食</th>
        <td>サンドイッチ</td>
        <td>弁当</td>
    </tr>
</table>

ブラウザ表示

この場合、左端のthにscope="row"を指定することで、「朝食」や「昼食」が行全体の見出しになります。

5. scope属性がアクセシビリティに与える効果

スクリーンリーダーは、thタグのscope属性を読み取って、どのセルがどの情報に対応しているかを正しく伝えることができます。これにより、視覚に頼らずテーブルの内容を理解できるようになります。

例えば、列見出しや行見出しが正しく指定されていないと、支援技術は「データが何を意味しているか」を把握できず、ユーザーに混乱を与えてしまいます。

6. colgroupやrowgroupでグループ見出しを作る

複雑なテーブルでは、列や行をまとめる見出しも便利です。


<table border="1">
    <tr>
        <th colspan="2" scope="colgroup">商品情報</th>
        <th colspan="2" scope="colgroup">在庫情報</th>
    </tr>
    <tr>
        <th scope="col">商品名</th>
        <th scope="col">価格</th>
        <th scope="col">店舗A</th>
        <th scope="col">店舗B</th>
    </tr>
    <tr>
        <td>ノートパソコン</td>
        <td>120,000円</td>
        <td>10</td>
        <td>5</td>
    </tr>
</table>

ブラウザ表示

scope="colgroup"を使うことで、複数の列をまとめて「商品情報」「在庫情報」として意味付けできます。rowgroupも同様に行をまとめるときに使えます。

7. 初心者が間違えやすいポイント

thタグにscopeを付けないで見出しだけ作る
tdタグとthタグを混同する
複雑なテーブルで行と列の範囲を間違える

初心者でも簡単なテーブルから練習して、thタグとscope属性の使い方に慣れることが大切です。

8. 実践：簡単なテーブルでまとめてみる

最後に、列見出しと行見出しを組み合わせた実践例です。


<table border="1">
    <tr>
        <th></th>
        <th scope="col">1月</th>
        <th scope="col">2月</th>
        <th scope="col">3月</th>
    </tr>
    <tr>
        <th scope="row">売上</th>
        <td>100,000円</td>
        <td>120,000円</td>
        <td>130,000円</td>
    </tr>
    <tr>
        <th scope="row">利益</th>
        <td>30,000円</td>
        <td>40,000円</td>
        <td>50,000円</td>
    </tr>
</table>

ブラウザ表示

このようにscope属性を使えば、支援技術でも列と行の対応がわかりやすくなり、誰でもテーブル内容を正しく理解できます。

まとめ

今回の記事では、HTMLのタグとscope属性について初心者向けに詳しく解説しました。thタグはテーブルの見出しセルを表し、scope属性はその見出しがどの範囲に対応するかを明示する役割があります。列見出しにはscope="col"、行見出しにはscope="row"を使用し、さらに複数の列や行をまとめる場合にはscope="colgroup"やscope="rowgroup"を活用することで、テーブルの構造をわかりやすくし、アクセシビリティを向上させることができます。

特に、スクリーンリーダーなどの支援技術は、scope属性が正しく指定されていると、列や行が何を示しているのかを正確に伝えることができ、視覚に頼らず情報を理解できます。初心者が陥りやすい間違いとして、thタグにscopeを付けない、tdとthを混同する、複雑なテーブルで範囲を間違える、といった点があります。まずは簡単なテーブルから練習し、列見出し・行見出し・グループ見出しの理解を深めることが大切です。

また、実践例として、列見出しと行見出しを組み合わせた売上表や利益表を作ることで、どのセルがどの見出しに対応しているのかを明確にし、テーブルの情報を正しく伝えることができます。これにより、視覚的に表を読む人だけでなく、支援技術を利用するユーザーにも配慮したアクセシブルなHTMLテーブルを作成することができます。

HTMLのthタグとscope属性を適切に使用することは、テーブルを作る上での基本中の基本ですが、実務でも非常に重要です。特に、ECサイトの商品一覧、売上管理表、スケジュール表など、さまざまな場面で正確に情報を伝える必要がある場合に必須となります。これらを意識してテーブルを設計することで、誰でも理解しやすく、アクセシブルで使いやすいWebページを作ることができます。

先生と生徒の振り返り会話

生徒

「先生、今回のthタグとscope属性のポイントを整理するとどうなりますか？」

先生

「まずthタグはテーブルの見出しセルを作るタグで、列や行のタイトルを示すものです。そしてscope属性は、その見出しがどの範囲に対応するかを明示するために使います。」

生徒

「列見出しにはcol、行見出しにはrowを指定するんですね。複数列や複数行のまとめにはcolgroupやrowgroupもある、と。」

先生

「その通りです。これを正しく使うことでスクリーンリーダーでもテーブルの内容が正しく伝わるようになります。」

生徒

「実際に練習するときは、簡単な売上表やスケジュール表から始めると良いんですね。」

先生