thタグ表の見出しセル

catnose · 2019/10/08 に最終更新

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>

table {
  border-collapse: collapse;
}
th, td {
  padding: 5px 8px;
  border: 1px solid #333;
}

太字が見出しセル（th）

👆このテーブルの場合、列の内容を表す「果物」と「味」が見出しセルにあたります。このように、テーブルの行や列の見出しに対して<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>

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 8px;
  border: 1px solid #333;
}
th {
  background-color: #2c88d9;
  color: #FFF;
}

青＝見出しセル（th）

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

thは必須ではない

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

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
td {
  padding: 5px 8px;
  border: 1px solid #333;
}

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

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

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

<table>
  <tr>
    <th>動物</th>
    <th>特徴</th>
  </tr>
  <tr>
    <th><img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f408.svg" alt="猫" width="30" height="30"></th>
    <td>最高にかわいい</td>
  </tr>
  <tr>
    <th><img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f415.svg" alt="犬" width="30" height="30"></th>
    <td>超かわいい</td>
  </tr>
</table>

table {
  border-collapse: collapse;
  text-align: center;
}
th, td {
  border: 1px solid #333;
  padding: 10px;
}
.fin {
  text-decoration: line-through;
}

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

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

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

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

rowspan：セルを縦方向に結合

<th rowspan="つなげるセルの数">○○</th>

<th>にrowspan属性を指定すると、セルの縦方向の大きさが変わり、下のセルと結合します。たとえば、rowspan="2"を指定すると、セル2つ分の大きさになります。

<table>
  <tr>
    <th rowspan="2">果物</th>
    <td>いちご</td>
    <td>甘い</td>
  </tr>
  <tr>
    <!-- 🖐ここはセルなし -->
    <td>レモン</td>
    <td>すっぱい</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
th, td {
  padding: 5px 10px;
  border: 1px solid #333;
}

👆rowspan="2"を指定した「果物」のセルが、縦2つ分の大きさになっています。縦に大きくなった分、その下の行の<th>は書かないようにしましょう。でないと、セルが余り、テーブルからはみ出てしまいます。

colspan：セルを横方向に結合

<th colspan="つなげるセルの数">○○</th>

セルを横方向に結合したいときはcolspan属性を使います。たとえばcolspan="3"とすると、そのセルが横3つ分の大きさになります。

<table>
  <tr>
    <th>動物</th>
    <th colspan="2">特徴</th>
    <!-- 🖐ここはセルなし -->
  </tr>
  <tr>
    <td>犬</td>
    <td>忠実</td>
    <td>ワン</td>
  </tr>
  <tr>
    <td>猫</td>
    <td>自由</td>
    <td>ニャー</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
th, td {
  padding: 5px 10px;
  border: 1px solid #333;
}

👆colspan="2"を指定した「特徴」という見出しセルが、横2つ分の大きさになります。大きくなったぶん、その行のセル数は1つ減ります。

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

HTML scope属性

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

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

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

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

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

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>

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 8px;
  border: 1px solid #333;
}
th {
  background-color: #2c88d9;
  color: #FFF;
}

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>

table {
  border-collapse: collapse;
}
th, td {
  padding: 5px 8px;
  border: 1px solid #333;
}

太字が見出しセル（th）

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

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