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

td 要素は「表の“中身のマス”を表すセル」

<td> は
「このマスには“実際のデータ”が入っています」
ということを表すタグです。

table の中で、
tr（行）の中に並ぶ「ふつうのセル」が td です。

ざっくり構造を言うと、

• table … 表全体の箱
• tr … 横一列の行
• th … 見出しセル（ラベル側）
• td … データセル（中身側） ← 今日の主役

という役割分担になっています。

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

th は「ラベル」、td は「そのラベルに対応する値」

まず、シンプルな料金表を例にします。

<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
「この列は何の情報か？」というラベル（プラン名 / 月額料金 / ユーザー数）

2 行目以降の td
「そのラベルに対応する実際の値」（ベーシック / 1,000円 / 1人 など）

つまり、

ラベル → th
ラベルに対応する中身 → td

td は“ラベルの右側に来る値”
とイメージすると分かりやすいです。

行と列のイメージの中での td の位置づけ

「1 行 = 1 件のデータ」「1 列 = 1 項目」

例えば、こんな表を考えます。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>28</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>32</td>
    <td>デザイナー</td>
  </tr>
</table>

ここでは、

1 行目 → 列の見出し（th）
2 行目 → 1 人目のデータ（td が 3 つ）
3 行目 → 2 人目のデータ（td が 3 つ）

という構造です。

td は「1 行の中の 1 項目分の値」
つまり、「1 人の情報のうち“名前だけ”」「年齢だけ」「職業だけ」
といった“ピース”を担当しています。

この「1 行 = 1 レコード」「1 列 = 1 項目」「1 マス = 1 値」という感覚が、
td を正しくイメージするうえでとても大事です。

td の中にはテキストだけでなく、何でも入れられる

シンプルなテキストだけのセル

一番基本はテキストだけのセルです。

<td>1,000円</td>
<td>エンジニア</td>
<td>2024-06-01</td>

これは「その項目の値が文字列で表現されている」パターン。

リンクを入れるセル

セルの中にリンクを入れることもよくあります。

<td>
  <a href="/users/1">詳細を見る</a>
</td>

「この行のデータの詳細ページへのリンク」
みたいなイメージですね。

ボタンやアイコンを入れるセル

操作用のボタンを置くこともあります。

<td>
  <button type="button">編集</button>
</td>

あるいは、状態を示すアイコンなど。

<td>
  <span class="status status-active">有効</span>
</td>

td は“その行・その列に対応する情報なら何でも入る箱”
と考えて OK です。

CSS と td：見た目の整え方の基本

枠線・余白・揃え方

表全体を整えるとき、
th と td に共通のスタイルを当てることが多いです。

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
}

数値だけ右寄せにしたい場合は、
クラスを付けて制御します。

<td class="num">1,000</td>
<td class="num">2,000</td>

td.num {
  text-align: right;
}

ここでも、
「見た目は CSS、意味は HTML」
という分担を意識するのが大事です。

td は「ここはデータセルです」という意味を持ち、
見た目の揃え方や色は CSS で決める、というスタイルです。

JavaScript と td：データからセルを生成する

オブジェクト配列 → table の定番パターン

JavaScript で表を作るとき、
「1 オブジェクト → 1 行（tr）」「各プロパティ → td」
という対応で作るのが定番です。

データのイメージ：

const users = [
  { name: "山田太郎", age: 28, job: "エンジニア" },
  { name: "佐藤花子", age: 32, job: "デザイナー" },
];

const users = [
  { name: "山田太郎", age: 28, job: "エンジニア" },
  { name: "佐藤花子", age: 32, job: "デザイナー" },
];

これを table に描画するイメージ：

const table = document.querySelector("#userTable");

users.forEach((user) => {
  const tr = document.createElement("tr");

  const nameCell = document.createElement("td");
  nameCell.textContent = user.name;

  const ageCell = document.createElement("td");
  ageCell.textContent = user.age;

  const jobCell = document.createElement("td");
  jobCell.textContent = user.job;

  tr.appendChild(nameCell);
  tr.appendChild(ageCell);
  tr.appendChild(jobCell);

  table.appendChild(tr);
});

const table = document.querySelector("#userTable");

users.forEach((user) => {
  const tr = document.createElement("tr");

  const nameCell = document.createElement("td");
  nameCell.textContent = user.name;

  const ageCell = document.createElement("td");
  ageCell.textContent = user.age;

  const jobCell = document.createElement("td");
  jobCell.textContent = user.job;

  tr.appendChild(nameCell);
  tr.appendChild(ageCell);
  tr.appendChild(jobCell);

  table.appendChild(tr);
});

HTML 側：

<table id="userTable">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
</table>

ここでの対応は、

• オブジェクト 1 つ → tr 1 行
• プロパティ 1 つ → td 1 セル

td は「データ構造の“値”を画面に出す場所」
というイメージで扱うと、JS ともきれいに噛み合います。

td を使うか迷ったときの判断基準

「これは“ラベル側”ではなく、“値側”か？」

自分にこう聞いてみてください。

「このセルは“列や行の名前”か？」
→ YES なら th
→ NO で、“その名前に対応する中身”なら td

具体的には、

列のタイトル → th
行のタイトル → th
それ以外の値 → td

というシンプルなルールでほぼいけます。

「これは“何かの名前”か、“その名前に対応する中身”か？」
ここを意識してタグを選べるようになると、
表の意味が一気にクリアになります。

初心者として「td タグ」で絶対に掴んでほしいこと

<td> は、
「table の中で、“ラベルに対応する実際のデータが入るセル”」 です。

th はラベル（列名・行名）
td はそのラベルに対応する値

1 行 = 1 件のデータ
1 列 = 1 項目
1 td = その項目の値

テキストだけでなく、リンク・ボタン・アイコンなども入れられる。
JavaScript では「オブジェクトの値 → td」という対応で表を描画する。

あなたが td を書くときに、
「これは“名前”じゃなくて、“名前に対応する中身”だよな？」
と一度自問できるようになったら、
もう td を“なんとなくのマス”ではなく、
“データを正しく置くための意味のあるセル”として扱えている状態です。