Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】th要素の使い方

th要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

thオブジェクトは、HTMLのテーブル(表)内で、ヘッダーセル、つまり見出しの役割を持つセルを表すオブジェクトです。ウェブページに表形式のデータを表示する際に、そのデータが何についてのものなのかを明確にするために使用されます。例えば、商品リストの「商品名」や「価格」といった列のタイトル、あるいは年ごとの売上データをまとめた表の「2023年」「2024年」といった行のカテゴリ名などを定義する際にこのth要素を利用します。

このオブジェクトを使う主なメリットは、テーブルのセマンティクス(意味構造)を向上させる点にあります。th要素によって、ウェブブラウザや検索エンジン、そして特にスクリーンリーダーなどの支援技術が、テーブルの各データセル(<td>要素)がどの見出しに関連しているかを正確に理解できるようになります。これにより、視覚に障がいのある方を含むすべてのユーザーがテーブルの内容を理解しやすくなり、ウェブコンテンツのアクセシビリティ(使いやすさ)が大きく向上します。

thオブジェクトは通常、<tr>(テーブルの行)要素の子要素として配置され、一つ以上の<td>(データセル)要素とともにテーブルの行を構成します。重要な属性としてscope属性があり、これはth要素が見出しとして適用される範囲が、属する行全体(row)なのか、列全体(col)なのか、あるいは行グループ(rowgroup)や列グループ(colgroup)なのかを明示的に指定するために使用されます。scope属性を適切に利用することで、複雑なテーブルでもその構造とデータの関連性を明確に保ち、誰もが情報にアクセスしやすいウェブページを構築できます。正しいテーブルの構造化とアクセシビリティの確保において、thオブジェクトは不可欠な存在です。

公式リファレンス: <th>: The Table Header element

構文(syntax)

1<th>Header Content</th>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ