<table> / <tr> / <td> / <th>

<table>
  <caption>テーブルのタイトル</caption>
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター1</td>
      <td>フッター2</td>
    </tr>
  </tfoot>
</table>

タグ / 属性	概要
<table>	テーブル全体を囲むコンテナ要素です。
<tr>	テーブルの1行（Table Row）を表します。
<td>	テーブルのデータセル（Table Data）を表します。通常のデータを入れます。
<th>	テーブルの見出しセル（Table Header）を表します。テキストは太字・中央揃えになります。
<caption>	テーブルのタイトル・見出しを指定します。『<table>』の最初の子要素として記述します。
<thead>	テーブルのヘッダー行グループを表します。列見出しを含む行を入れます。
<tbody>	テーブルの本体（データ行）グループを表します。開始タグ・終了タグともに省略可能で、省略するとブラウザが自動補完します。
<tfoot>	テーブルのフッター行グループを表します。合計・注釈などを入れます。
<colgroup>	列をグループ化する要素です。CSSで列単位のスタイルを適用する際に使います。
<col>	『<colgroup>』内で個々の列を表す空要素です。『span』属性で複数列をまとめて指定できます。
scope属性	『<th>』の見出しがどの方向のセルに対応するかを指定します。『col』（列）・『row』（行）・『colgroup』・『rowgroup』が指定できます。
colspan属性	セルを横方向（列方向）に結合します。値は結合する列数を数値で指定します。『<td>』・『<th>』に使います。
rowspan属性	セルを縦方向（行方向）に結合します。値は結合する行数を数値で指定します。『<td>』・『<th>』に使います。
headers属性	『<td>』が参照する『<th>』の『id』をスペース区切りで指定します。複雑なテーブルでセルと見出しの関係を明示するアクセシビリティ属性です。
abbr属性	『<th>』の内容の短縮形を指定します。スクリーンリーダーがこの値を読み上げることがあります。
span属性	『<colgroup>』・『<col>』でまとめて指定する列数を数値で指定します。

サンプルページはこちら

<!-- 列見出し（scope="col"）を使ったテーブル -->
<table border="1">
  <tr>
    <!-- scope="col" で列方向の見出しと明示 -->
    <th scope="col">名前</th>
    <th scope="col">言語</th>
    <th scope="col">用途</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>マークアップ言語</td>
    <td>Webページの構造</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>スタイルシート言語</td>
    <td>Webページの見た目</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>プログラミング言語</td>
    <td>Webページの動き</td>
  </tr>
</table>

<!-- 行見出し（scope="row"）を使ったテーブル -->
<table border="1">
  <tr>
    <th scope="col">科目</th>
    <th scope="col">1学期</th>
    <th scope="col">2学期</th>
    <th scope="col">3学期</th>
  </tr>
  <tr>
    <!-- scope="row" で行方向の見出しと明示 -->
    <th scope="row">数学</th>
    <td>85</td>
    <td>90</td>
    <td>88</td>
  </tr>
  <tr>
    <th scope="row">英語</th>
    <td>72</td>
    <td>78</td>
    <td>81</td>
  </tr>
</table>

3列4行のテーブルが表示されます。1行目が太字の見出し（名前・言語・用途）、2〜4行目が各言語のデータになります。

『scope="col"』は「この見出しは列方向のセルに対応する」ことを明示する属性です。見た目は変わりませんが、スクリーンリーダーなどの支援技術がセルと見出しの関係を正しく読み上げるために使います。

2つ目のテーブルでは『scope="row"』を使っています。これは「この見出しは行方向のセルに対応する」という意味で、行の先頭にある『<th>』に指定します。列見出しには『scope="col"』、行見出しには『scope="row"』が対応します。

サンプルページはこちら

『<thead>』『<tbody>』『<tfoot>』を使うと、テーブルの行をヘッダー・本体・フッターにグループ化できます。『<caption>』はテーブルにタイトルを付ける要素で、必ず『<table>』の最初の子要素として記述します。

<table border="1">
  <!-- テーブルのタイトル -->
  <caption>プログラミング言語別 学習時間</caption>

  <!-- ヘッダー行グループ -->
  <thead>
    <tr>
      <th scope="col">言語</th>
      <th scope="col">難易度</th>
      <th scope="col">学習時間（時間）</th>
    </tr>
  </thead>

  <!-- データ行グループ -->
  <tbody>
    <tr>
      <td>HTML</td>
      <td>初級</td>
      <td>10</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>初級</td>
      <td>20</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>中級</td>
      <td>40</td>
    </tr>
    <tr>
      <td>PHP</td>
      <td>中級</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>中級</td>
      <td>25</td>
    </tr>
  </tbody>

  <!-- フッター行グループ（合計など） -->
  <tfoot>
    <tr>
      <td colspan="2">合計</td>
      <td>125</td>
    </tr>
  </tfoot>
</table>

ヘッダー行（言語・難易度・学習時間）が『<thead>』、5件のデータ行が『<tbody>』、合計行が『<tfoot>』にグループ化されます。テーブル上部には『<caption>』でタイトルが表示されます。印刷時に複数ページにまたがる場合、ブラウザによってはヘッダーとフッターが各ページに繰り返し表示されます。

サンプルページはこちら

『<tbody>』は開始タグ・終了タグともに省略可能です。省略した場合、ブラウザは『<thead>』にも『<tfoot>』にも属さない『<tr>』を自動的に『<tbody>』で囲みます。つまり、以下の2つのコードは同じ意味になります。

<!-- tbody を省略した書き方 -->
<table border="1">
  <tr>
    <th>名前</th>
    <th>言語</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>マークアップ</td>
  </tr>
</table>

<!-- ブラウザが自動的にこう解釈する -->
<table border="1">
  <tbody>
    <tr>
      <th>名前</th>
      <th>言語</th>
    </tr>
    <tr>
      <td>HTML</td>
      <td>マークアップ</td>
    </tr>
  </tbody>
</table>

一方、『<thead>』と『<tfoot>』は省略できません。グループ化が必要な場合は明示的に記述してください。

グループ化の詳しい解説は 『thead / tbody / tfoot / caption』 もご覧ください。

『colspan』を使うとセルを横方向に、『rowspan』を使うとセルを縦方向に結合できます。結合したセルの分だけ、後続の行・列から『<td>』を省略する必要があります。

<table border="1">
  <tr>
    <th scope="col">分類</th>
    <th scope="col">言語</th>
    <th scope="col">主な用途</th>
  </tr>

  <!-- rowspan="2" で「フロントエンド」を2行分に結合 -->
  <tr>
    <td rowspan="2">フロントエンド</td>
    <td>HTML</td>
    <td>ページの構造</td>
  </tr>
  <!-- rowspan で結合済みのため「分類」列のセルは省略 -->
  <tr>
    <td>CSS</td>
    <td>見た目の装飾</td>
  </tr>

  <!-- rowspan="2" で「バックエンド」を2行分に結合 -->
  <tr>
    <td rowspan="2">バックエンド</td>
    <td>PHP</td>
    <td>サーバー処理</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>データ処理・AI</td>
  </tr>

  <tr>
    <td>フルスタック</td>
    <td>JavaScript</td>
    <td>フロント＆サーバー両対応</td>
  </tr>

  <!-- colspan="3" で3列を横方向に結合 -->
  <tr>
    <td colspan="3">※ 各言語の詳細は辞典ページを参照してください</td>
  </tr>
</table>

「フロントエンド」と「バックエンド」のセルが『rowspan="2"』で縦に2行分結合されます。最下行は『colspan="3"』で横に3列分結合され、注釈として1つのセルにまとまります。結合したセルの数だけ後続の『<td>』を省略している点に注目してください。

サンプルページはこちら

セル結合の詳しい解説は 『colspan / rowspan』 をご覧ください。

『<colgroup>』と『<col>』を使うと、列単位でスタイルを適用できます。個々の『<td>』や『<th>』にクラスを付ける必要がなくなるため、コードがすっきりします。

<table border="1">
  <caption>KOFキャラクター一覧</caption>
  <colgroup>
    <!-- 1列目: 名前（背景色を付ける） -->
    <col style="background-color: #f0f0f0;">
    <!-- 2〜3列目: まとめて指定 -->
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">名前</th>
      <th scope="col">所属</th>
      <th scope="col">格闘スタイル</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>八神庵</td>
      <td>八神流古武術</td>
      <td>八神流古武術 + 本能</td>
    </tr>
    <tr>
      <td>草薙京</td>
      <td>草薙流古武術</td>
      <td>草薙流古武術＋我流の拳法</td>
    </tr>
    <tr>
      <td>テリー・ボガード</td>
      <td>サウスタウン</td>
      <td>ジェフ流喧嘩殺法</td>
    </tr>
  </tbody>
</table>

『<col style="background-color: #f0f0f0;">』により、1列目（名前）の全セルに背景色が適用されます。『<col span="2">』は2列分をまとめて指定する書き方で、ここではスタイルなしの列をグループ化しています。

サンプルページはこちら

HTMLの『border="1"』属性でも罫線は表示できますが、実際のWebサイトではCSSでテーブルの見た目を整える方法もあります。以下に実務でよく使うスタイリングのパターンを紹介します。

/* 罫線を1本線にする（デフォルトは二重線） */
table {
  border-collapse: collapse;
  width: 100%;
}

/* セルに罫線と余白を付ける */
th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

/* ヘッダー行を目立たせる */
thead th {
  background-color: #2c3e50;
  color: #fff;
}

/* ストライプ（縞模様） */
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* ホバー時のハイライト */
tbody tr:hover {
  background-color: #eaf2f8;
}

/* フッター行 */
tfoot td {
  background-color: #ecf0f1;
  font-weight: bold;
}

/* キャプション */
caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 8px;
}

『border-collapse: collapse;』を指定すると、セル間の余白がなくなり1本線の罫線になります。指定しない場合はセルごとに罫線が引かれるため二重線になります。『:nth-child(even)』で偶数行に背景色を付けると、データが読みやすくなります。

サンプルページはこちら（CSS適用前と適用後を並べて表示）

テーブルは列数が多いとスマートフォンの画面に収まりません。横スクロールを可能にすることで、テーブルの内容を崩さずに表示できます。

<!-- テーブルをdivで囲んで横スクロールを有効にする -->
<div style="overflow-x: auto;">
  <table border="1">
    <thead>
      <tr>
        <th>名前</th>
        <th>所属</th>
        <th>格闘スタイル</th>
        <th>BGM</th>
        <th>初登場</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>八神庵</td>
        <td>八神流古武術</td>
        <td>八神流古武術 + 本能</td>
        <td>嵐のサキソフォン2</td>
        <td>KOF '95</td>
      </tr>
      <tr>
        <td>草薙京</td>
        <td>草薙流古武術</td>
        <td>草薙流古武術＋我流の拳法</td>
        <td>ESAKA</td>
        <td>KOF '94</td>
      </tr>
    </tbody>
  </table>
</div>

テーブルを『<div style="overflow-x: auto;">』で囲むだけで、画面に収まらない場合に横スクロールバーが表示されます。テーブル自体のHTMLは変更する必要がないため、最もシンプルなレスポンシブ対応方法です。

サンプルページはこちら

rowspan で省略すべき <td> を書いてしまう

『rowspan="2"』を指定したセルは2行分を占有するため、次の行ではそのセルが占めるスロット分の <td> を省略しなければなりません。省略し忘れると列がずれます。

NG: <td> が多すぎて列がずれる例です。

<table border="1">
  <tr>
    <td rowspan="2">A（2行分）</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <!-- NG: A の分の <td> は省略が必要なのに書いてしまっている -->
    <td>D（不要）</td>
    <td>E</td>
    <td>F</td>
  </tr>
</table>

OK: rowspan が占有する分の <td> を省略した例です。

<table border="1">
  <tr>
    <td rowspan="2">A（2行分）</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <!-- OK: A のスロット分は省略 -->
    <td>E</td>
    <td>F</td>
  </tr>
</table>

border-collapse: collapse を忘れて二重線になる

テーブルの各セルに CSS で罫線を付けただけでは、セルとセルの間で線が2本重なった「二重線」になります。『border-collapse: collapse』をテーブルに指定することで、隣り合う罫線を1本に統合できます。

NG: border-collapse なしで二重線になる例です。

<!-- NG: border-collapse を指定していないためセル間が二重線になる -->
<table style="border: 1px solid #333;">
  <tr>
    <th style="border: 1px solid #333;">名前</th>
    <th style="border: 1px solid #333;">得意技</th>
  </tr>
  <tr>
    <td style="border: 1px solid #333;">テリー・ボガード</td>
    <td style="border: 1px solid #333;">バスターウルフ</td>
  </tr>
</table>

OK: border-collapse: collapse で1本線にした例です。

<!-- OK: border-collapse: collapse でセル間の線が1本にまとまる -->
<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #333;">名前</th>
    <th style="border: 1px solid #333;">得意技</th>
  </tr>
  <tr>
    <td style="border: 1px solid #333;">テリー・ボガード</td>
    <td style="border: 1px solid #333;">バスターウルフ</td>
  </tr>
</table>

<td> を <tr> の外に書いてしまう

『<td>』は必ず『<tr>』の中に書かなければなりません。『<table>』の直下に『<td>』を書くと構造が不正になります。ブラウザが自動補正して表示されることもありますが、予期しないレイアウト崩れの原因になります。必ず『<tr>』で行を囲んでから『<td>』を書く必要があります。

NG: <tr> を省略して <td> を直書きした例です。

<table border="1">
  <!-- NG: <tr> なしで <td> を直接書いている -->
  <td>ID</td>
  <td>名前</td>
  <td>1</td>
  <td>テリー・ボガード</td>
</table>

OK: <tr> で行を囲んでから <td> を書いた例です。

<table border="1">
  <tr>
    <td>ID</td>
    <td>名前</td>
  </tr>
  <tr>
    <td>1</td>
    <td>テリー・ボガード</td>
  </tr>
</table>

サンプルページはこちら

HTMLのテーブルは表形式のデータを表示する目的に使います。かつてはテーブルを使ってページのレイアウトを組む手法がありましたが、CSSのFlexboxやGridを使う方法もあります。テーブルはデータの表示を目的として設計されています。

『<th>』に『scope』属性を付けると、見出しセルがどの行・列に対応するかをスクリーンリーダーなどの支援技術に明示できます。アクセシビリティ向上に有効です。列の見出しには『scope="col"』、行の見出しには『scope="row"』を使います。

テーブルをより意味のある構造にするための要素（『<thead>』・『<tbody>』・『<tfoot>』・『<caption>』）についてはこのページの「テーブルのグループ化」セクション、および 『thead / tbody / tfoot / caption』 で詳しく解説しています。セルの結合についてはこのページの「セル結合」セクション、および 『colspan / rowspan』 を参照してください。

※ バージョン情報は MDN に基づいています。