thタグ 👉 表の見出しセル

HTMLの<th>ティーエイチタグは、表(テーブル)の見出しセルを表します。

✍️セル:表の1つ1つのマス目のこと
✍️「th」は、Table Header(テーブルヘッダー)の略です

<table>
  <tr>
    <th>果物</th> <th></th>
  </tr>
  <tr>
    <td>いちご</td> <td>甘い</td>
  </tr>
  <tr>
    <td>レモン</td> <td>酸っぱい</td>
  </tr>
</table>

太字が見出しセル(th)

👆このテーブルの場合、列の内容を表す「果物」と「味」が見出しセルにあたります。このように、テーブルの行や列の見出しに対して<th>タグを使います。

✍️このページでは<th>タグの使い方にしぼって解説します。HTMLのテーブル(<table>)の基本的な使い方は、下記ページをご覧ください。

見出しセル(th)の使い方

行と列、どちらの見出しにも使える

<table>
  <tr>
    <th>選手名</th> <th>スコア</th>
  </tr>
  <tr>
    <th>ジョン</th> <td>5</td>
  </tr>
  <tr>
    <th>ニック</th> <td>9</td>
  </tr>
</table>

青=見出しセル(th)

👆分かりやすくするために、見出しセル(<th>)を青くぬりました。このように、<th>は行と列どちらの見出しにも使うことができます。

thは必須ではない

<table>
  <tr>
    <td>みかん</td>
    <td>りんご</td>
    <td>ぶどう</td>
  </tr>
</table>

👆<th>はテーブルに不要であれば、使わなくてもOKです。単純にデータを並べて表示したいような場合には、<td>だけを使えば良いでしょう。

th内に画像などを入れてもOK

テーブルのセルには、<img><div><span><code>など、さまざまな要素を入れることができます。

<table>
  <tr>
    <th>動物</th>
    <th>特徴</th>
  </tr>
  <tr>
    <th><img src="https://twemoji.maxcdn.com/2/svg/1f408.svg" alt="" width="30" height="30"></th>
    <td>最高にかわいい</td>
  </tr>
  <tr>
    <th><img src="https://twemoji.maxcdn.com/2/svg/1f415.svg" alt="" width="30" height="30"></th>
    <td>超かわいい</td>
  </tr>
</table>

👆このように、セル内に画像を入れたり、<span>を使ってテキストを装飾したりなど、さまざまな表現ができます。なお、画像を使うときには<img alt="○○">というように代替テキスト(画像の説明)を入力するようにしましょう。

🙅th内で見出しタグを使ってはいけない

<th>は「見出し」という意味を持っています。<th>の中で以下のタグを使ってはいけません。意味が重複or矛盾してしまうからです。

  • 見出しタグ(<h1><h6>
  • ヘッダータグ(<header>
  • フッタータグ(<footer>
  • セクショニング・コンテンツ(<section><aside><article><nav>

scope属性で「見出しがかかる範囲」を表す

HTML scope属性
<th scope="範囲を表すキーワード"></th>

<th>scope属性を指定すると「どのセルに対する見出しなのか(どのセルに見出しが関連しているのか)」を表すことができます。

これは「検索エンジンのようなプログラム」や「読み上げソフト」などに対してテーブルの構造を伝えるものであり、テーブルの見た目自体は変わりません。

scope="row"
同じ行のすべてのセルに関連する
scope="col"
同じ列のすべてのセルに関連する
scope="rowgroup"
同じ行の残りのすべてのセルに関連する
(その<th>より右のセルに関連する)
scope="colgroup"
同じ列の残りのすべてのセルに関連する
(その<th>より下のセルに関連する)
scope="auto"
自動で判断される(何も指定しなかった場合はコレ)

😺<table>へのdir属性によりテーブル内のテキストの方向を逆にしている場合は、rowgroupcolgroupにより見出しがかかる方向も逆になります(めったにないと思いますが…)。

scope属性を指定したサンプル

<table>
  <tr>
    <th scope="col">名前↓</th>
    <th scope="col">スコア↓</th>
    <th scope="col">順位↓</th>
  </tr>
  <tr>
    <th scope="row">ジョン→</th>
    <td>15</td>
    <td>1</td>
  </tr>
  <tr>
    <th scope="row">ニック→</th>
    <td>8</td>
    <td>2</td>
  </tr>
  <tr>
    <th scope="row">キャシー→</th>
    <td>5</td>
    <td>3</td>
  </tr>
</table>

scope属性を指定しても表示は変わらない

👆分かりやすくするためにscopeの範囲の向きに矢印を入れました。複雑なテーブルを作る場合は、このようにscope属性を指定して「どのセルに対する見出しなのか」を表すと良いでしょう。

abbr属性で「略語」を表す

HTML
<th abbr="略語">○○</th>

<th>タグでは、abbr属性を使って「略語」や「別の言い回し」を記入することもできます。この属性も「検索エンジンのようなプログラム」や「読み上げソフト」などが読み取るものであり、テーブルの見た目は変わりません。

<table>
  <tr>
    <th></th>
    <th abbr="ドラレコ">ドライブレコーダー</th>
  </tr>
  <tr>
    <td>ランクA</td>
    <td>あり</td>
  </tr>
  <tr>
    <td>ランクB</td>
    <td>なし</td>
  </tr>
</table>

太字が見出しセル(th)

👆このようにabbr="○○"にテキストの略語や言い換えを入れます。

ちなみに<abbr>という「略語」を表すHTMLタグもあります。このタグは、段落やリストなど様々な文章内で使用できます。