【HTML】tableタグ（表）の基本構造と正しいマークアップ規則

HTMLでデータを整理して見やすく表示するための <table> タグ。要素が縦横に連なるため構造が複雑になりやすく、正しい順番でタグを配置しないと構文エラーや型崩れの原因になる。後からコードをコピペして使い回せるようにするための個人メモ。

1. 基本構造と最小構成に必要な4つのタグ
1. 📌 基本的な表のコード例
2. 実装時の重要規則（Tips / 注意点）
3. より丁寧な表にするための応用タグ（構造化）
まとめ（振り返り用チェックリスト）

1. 基本構造と最小構成に必要な4つのタグ

HTMLの表は、「行（横の並び）」をベースにして、その中に「列（セルの塊）」を詰め込んでいく構造になっている。

<table>： 表の全体を囲むコンテナ。
<tr>（Table Row）： 表の「行（横一行）」を定義する。
<th>（Table Header）： 表の「見出しセル」。文字が太字になり、中央揃えになる。
<td>（Table Data）： 表の「データ（中身）セル」。

<table>は枠が無いが、<tableborder="1">とすると枠が表示され、数字を変えると線種が変わる。

📌 基本的な表のコード例

2行×3列（見出し1行＋データ1行）の最小構成。

HTML

<table border="1">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>HTML参考書</td>
    <td>¥2,400</td>
    <td>あり</td>
  </tr>
  <tr>
    <td>PHP参考書</td>
    <td>¥2,600</td>
    <td>なし</td>
  </tr>
</table>

<table border="1">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>HTML参考書</td>
    <td>¥2,400</td>
    <td>あり</td>
  </tr>
  <tr>
    <td>PHP参考書</td>
    <td>¥2,600</td>
    <td>なし</td>
  </tr>
</table>

2. 実装時の重要規則（Tips / 注意点）

ルール1：レイアウト目的（枠組み）で <table> を使わない

昔のWeb制作では、画面の左右にメニューを配置するなどの「ページ全体のレイアウト」に <table> タグが使われていたが、現在は完全にNG（非推奨）。

表タグはあくまで「表形式のデータ」を表示するためだけのもの。
画面のレイアウト（要素を横に並べるなど）を行いたい場合は、必ず CSS（FlexboxやGridレイアウト） を使用する。

ルール2：<tr> の直下には <th> か <td> しか置けない

<ul> の直下に <li> しか置けないルールと同様に、<tr>（行）のすぐ内側に直接テキストを書いたり、<div> などの別タグを挟むのはマークアップ違反となる。

❌ 誤ったマークアップ：HTML<tr> <div><td>データ</td></div> </tr>
⭕ 正しいマークアップ：HTML<tr> <td><div>データ</div></td> </tr>

ルール3：セルの横結合（colspan）と縦結合（rowspan）

複数のセルを1つに繋げたい場合は、<th> や <td> タグに属性を追加する。値には「何個分のセルを結合するか」の数値を指定。

横に結合する：colspan="結合する列数"（Column Span）
縦に結合する：rowspan="結合する行数"（Row Span）

HTML

<table border="1">
<tr>
    <th>商品名</th>
    <th>数量</th>
    <th>金額</th>
  </tr>
  <tr>
    <td>HTML参考書</td>
    <td>1</td>
    <td>¥2,400</td>
  </tr>
  <tr>
    <td>CSS参考書</td>
    <td>1</td>
    <td>¥2,000</td>
  </tr>
  <tr>
    <td colspan="2">合計</td>
    <td>¥4,400</td>
  </tr>
</table>

<table border="1">
<tr>
    <th>商品名</th>
    <th>数量</th>
    <th>金額</th>
  </tr>
  <tr>
    <td>HTML参考書</td>
    <td>1</td>
    <td>¥2,400</td>
  </tr>
  <tr>
    <td>CSS参考書</td>
    <td>1</td>
    <td>¥2,000</td>
  </tr>
  <tr>
    <td colspan="2">合計</td>
    <td>¥4,400</td>
  </tr>
</table>

3. より丁寧な表にするための応用タグ（構造化）

大規模な表や、SEO・アクセシビリティを強化する場合は、表の中身をさらに <thead>（頭）、<tbody>（体）、<tfoot>（足）にグループ分けする。

HTML

<table border="1">
  <caption>【2026年度】売上表</caption> <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>¥100,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>総計</td>
      <td>¥100,000</td>
    </tr>
  </tfoot>
</table>

<table border="1">
  <caption>【2026年度】売上表</caption> <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>¥100,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>総計</td>
      <td>¥100,000</td>
    </tr>
  </tfoot>
</table>