JavaScript | HTML / CSS 連携：リスト・表組み－ thタグ

JavaScript

2026.06.02

th 要素は「このセルは“見出し側”ですよ」と宣言するタグ
th・td・tr・table の関係をもう一度整理する
1. 表の構造の中での th のポジション
列見出しとしての th：一番よく見る使い方
1. 1 行目を「列のタイトル」にする
行見出しとしての th：左端に置くパターン
1. 「この行は何の行か」を表す th
th と td の違いを“意味”で切り分ける
1. 見た目ではなく「役割」で決める
CSS と th：ヘッダー行・ヘッダー列を強調する
1. ヘッダー行を目立たせる
2. 左端の行見出しを強調する
JavaScript と th：ヘッダー行を動的に作る
1. 配列から「列見出しの th」を生成する
th を使うか迷ったときの判断基準
1. 自分にこう聞いてみる
初心者として「th タグ」で絶対に掴んでほしいこと

th 要素は「このセルは“見出し側”ですよ」と宣言するタグ

<th> は
「このセルは、ただのデータじゃなくて“見出し・ラベル”です」
とブラウザや機械に伝えるためのタグです。

table の中で使われ、
「列のタイトル」や「行のタイトル」を表します。

見た目としては太字＆中央寄せになることが多いですが、
本質は “意味としての見出しセル” であることです。
太字にしたいから使うのではなく、
「ここはラベル側だ」と伝えたいから使います。

th・td・tr・table の関係をもう一度整理する

表の構造の中での th のポジション

表はざっくりこういう構造でした。

table … 表全体の箱
tr … 行（row）
th … 見出しセル（header cell）
td … データセル（data cell）

コードでイメージするとこうです。

<table>
  <tr>
    <th>プラン名</th>
    <th>月額料金</th>
    <th>ユーザー数</th>
  </tr>
  <tr>
    <th>ベーシック</th>
    <td>1,000円</td>
    <td>1人</td>
  </tr>
</table>

ここでの th の役割は 2 種類あります。

1 行目の th
「この列は何を表しているか」の見出し（列見出し）

2 行目の左端の th
「この行は何のデータか」の見出し（行見出し）

それ以外のセル（1,000円 / 1人）は td（データ）です。

th は「このセルは“他のセルの意味を説明する側”」
td は「その説明に対応する“中身側”」
という関係になっています。

列見出しとしての th：一番よく見る使い方

1 行目を「列のタイトル」にする

料金表の例で見てみます。

<table>
  <tr>
    <th>プラン名</th>
    <th>月額料金</th>
    <th>ユーザー数</th>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>1,000円</td>
    <td>1人</td>
  </tr>
  <tr>
    <td>スタンダード</td>
    <td>2,000円</td>
    <td>5人</td>
  </tr>
</table>

ここでは 1 行目の th が
「この列は何の情報なのか」を表しています。

左の列 → プラン名
真ん中の列 → 月額料金
右の列 → ユーザー数

ブラウザやスクリーンリーダーは、
「この列のセルは、この th によって意味付けされている」
と理解します。

“列のタイトル”は th にする
これがまず 1 つ目の基本パターンです。

行見出しとしての th：左端に置くパターン

「この行は何の行か」を表す th

今度は、行の見出しとして th を使う例です。

<table>
  <tr>
    <th>曜日</th>
    <th>午前</th>
    <th>午後</th>
  </tr>
  <tr>
    <th>月</th>
    <td>会議</td>
    <td>開発</td>
  </tr>
  <tr>
    <th>火</th>
    <td>設計</td>
    <td>開発</td>
  </tr>
</table>

ここでは、

1 行目の th
「列の見出し」（曜日 / 午前 / 午後）

2 行目以降の左端の th
「行の見出し」（月 / 火）

という役割です。

「この行は“月曜日の行”ですよ」
「この行は“火曜日の行”ですよ」

というラベルを th が担当しています。

左端のセルが“その行全体のラベル”なら th にする
これが 2 つ目の基本パターンです。

th と td の違いを“意味”で切り分ける

見た目ではなく「役割」で決める

よくある誤解が
「太字にしたいから th にする」という発想です。

でも、本質は逆です。

「ここは列や行のラベルだから th にする」
「ここはラベルに対応する中身だから td にする」

見た目の太字や中央寄せは、
あくまで「見出しセルっぽく見せるためのデフォルトのスタイル」にすぎません。

もし太字がいらないなら、CSS で変えてしまって構いません。

th {
  font-weight: normal;
  text-align: left;
}

それでも th は th のままです。
意味として“見出しセル”であることが重要 で、
見た目は後からいくらでも変えられます。

CSS と th：ヘッダー行・ヘッダー列を強調する

ヘッダー行を目立たせる

1 行目の th を強調する例です。

table tr:first-child th {
  background-color: #f5f5f5;
  font-weight: bold;
}

これで、
「列の見出し行」が視覚的にも分かりやすくなります。

左端の行見出しを強調する

行見出しとしての th を強調する例です。

table th:first-child {
  background-color: #f0f7ff;
  font-weight: bold;
}

曜日やプラン名など、
「行のラベル」を少し目立たせることで、
表全体の読みやすさが上がります。

ここでも、
th を“意味のフック”として使い、
CSS で視覚的な強調を乗せていく
という考え方が大事です。

JavaScript と th：ヘッダー行を動的に作る

配列から「列見出しの th」を生成する

JavaScript で表を作るとき、
まず「ヘッダー行（th）」を作り、
そのあとにデータ行（td）を作る、という流れが定番です。

const columns = ["プラン名", "月額料金", "ユーザー数"];
const table = document.querySelector("#planTable");

// ヘッダー行を作る
const headerTr = document.createElement("tr");

columns.forEach((text) => {
  const th = document.createElement("th");
  th.textContent = text;
  headerTr.appendChild(th);
});

table.appendChild(headerTr);

const columns = ["プラン名", "月額料金", "ユーザー数"];
const table = document.querySelector("#planTable");

// ヘッダー行を作る
const headerTr = document.createElement("tr");

columns.forEach((text) => {
  const th = document.createElement("th");
  th.textContent = text;
  headerTr.appendChild(th);
});

table.appendChild(headerTr);