表（table）の基本構造と見やすい書き方｜初心者向けにわかりやすく解説

比較表・料金表・スペック表など、Web制作でよく使われるのが table（表）タグ です。

しかし「行・列・セルの考え方」や「見やすい表の作り方」を初心者のうちは混乱しがちです。

この記事では、table の基本構造・書き方・見やすく整えるコツ を図とコード例でわかりやすく解説します。

---

tableタグとは？

tableタグは、データを行と列で並べるためのタグ です。

例：料金表／比較表／仕様一覧／スケジュール　など。

HTMLで表を作るときの最初のタグが <table> です。

---

table の基本構造（行・列・セル）

表の構造はとてもシンプルです。

table（表全体）
 ├ tr（行）
 │   ├ th（見出しセル）
 │   └ td（データセル）

基本形（最小構造）

<table>
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>サイズ</td>
    <td>10cm</td>
  </tr>
</table>

項目	内容
サイズ	10cm

用語の役割

• table：表全体を囲う
• tr（table row）：横1行
• th（table header）：見出しセル（太字・中央寄せ）
• td（table data）：通常のセル

---

thead / tbody / tfoot の意味

表が少し複雑になる場合、構造をわかりやすくするため
以下のタグを使うことがあります：

タグ	役割
thead	表のヘッダー（最上段）
tbody	表のメイン部分
tfoot	表のまとめ（合計など）

実例

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple AirPods</td>
      <td>29,000円</td>
    </tr>
    <tr>
      <td>SONY WF-1000XM5</td>
      <td>39,000円</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>最安値</th>
      <td>29,000円</td>
    </tr>
  </tfoot>
</table>

---

見やすい表の作り方（初心者でもすぐできる）

見やすさには 3つのルール があります。

---

① 1行目は必ず th にする（見出し行）

<tr>
  <th>項目</th>
  <th>内容</th>
</tr>

→ これだけで視認性UP
→ 読み上げソフトにも優しい（意味が伝わる）

---

② 余白（padding）を入れると劇的に読みやすくなる

CSSで調整：

table td, table th {
  padding: 8px 12px;
}

余白がない表は読みにくいので padding は必須。

---

③ 横線（border）で区切るとプロっぽい

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

table th, table td {
  border-bottom: 1px solid #ddd;
}

→ 行ごとの区切りが明確に
→ WordPressとの相性も良い

---

よく使う属性まとめ

colspan（列の結合）

<td colspan="2">スペックのまとめ</td>

→ 横に2つ分のセルを結合。

---

rowspan（行の結合）

<td rowspan="3">iPhone</td>

→ 縦に結合。

---

scope（アクセシビリティ向け）

<th scope="col">価格</th>
<th scope="row">商品名</th>

→ 読み上げソフトに「行方向 or 列方向の見出し」と伝える。

---

よくある間違い

div や span で表を作ろうとする

→ HTML的に間違い。表は table を使う。

---

th を使わず全部 td にしてしまう

→ 見出しがなくなり意味が不明確。

---

border を直接 table に書く（古いやり方）

<table border="1">  ← 古い

→ CSSで管理するのが正解。

---

thead / tbody を入れ子にする位置を間違える

→ 正解は table の直下。

---

まとめ

• table = 表全体
• tr = 行
• th = 見出しセル
• td = データセル
• thead / tbody / tfoot で構造が明確に
• padding・横線・見出し強調が見やすさの基本
• 意味のある表は SEO にもプラス
• HTML初心者こそ table の基本を理解しておくべき

---

著者からのひと言

table は最初は複雑に見えますが、仕組みを理解すると「行と列」の組み合わせだけでとてもシンプルです。
比較表・レビュー記事・料金表など、多くの場面で使うので、早めに慣れておくとブログ運営も制作も一気にラクになります。

次の記事は「ul・ol・liで箇条書きを作る方法」です。