ホームページで表を作るには？HTMLテーブルタグ（table･tr･th･td･caption）の書き方

ホームページに料金表やサービス一覧、スケジュール表などを掲載したいときに使われるのが、HTMLの「テーブル（表）」です。情報を縦と横に整理して伝えられるため、多くのWebサイトで欠かせない要素の一つです。

HTMLで表を作ると聞くと難しそうに感じるかもしれませんが、
実際には、
・表全体を囲む <table>、
・行を作る <tr>
・見出しセルの <th>
・データセルの <td>
・表タイトルを付ける <caption>
といった基本タグの役割を理解するだけで、誰でも正しい構造の表を作れるようになります。

まずは、これらの基本タグを使ってHTMLで表の「構造（骨組み）」を正しく作ることが重要です。構造がしっかりしていれば、後からCSSでデザインを整える際もレイアウトが崩れにくく、修正やメンテナンスもしやすくなります。

さらに、表の構造をより明確にするために、表の見出し部分をまとめる <thead>、本体データをまとめる <tbody>、まとめ部分を表す <tfoot> といった要素も用意されています。これらは必須ではありませんが、HTML Living Standardに沿った、より意味の分かりやすいテーブルを作るために役立つタグです。

この記事では、まず基本となる <table>・<tr>・<th>・<td>・<caption> の使い方を理解し、その後に <thead>・<tbody>・<tfoot> の概要もあわせて紹介します。

ホームページで表を作るには？まずはHTMLテーブルの基本構造を知ろう

ホームページに表を掲載するためには、まず、HTMLのテーブルがどのように構成されているのか？を理解することが大切です。
テーブルは、通常の文章とは異なり「縦（行）×横（列）」の構造を持つため、HTMLでもそれを表現するための専用タグ（table / tr / th / td / caption）が用意されています。

まずは、HTMLで作成したシンプルな表のサンプルを見てみましょう。

ブラウザで表示すると、次のような表になります。罫線の設定をしてないため罫線が表示されていません。

このように、HTMLの表は複数のタグを組み合わせて作られています。それぞれのタグには役割があり、正しい組み合わせで記述することで、見やすく意味の分かりやすい表を作成できます。

HTMLの表は「行」と「セル」の階層構造（入れ子構造）で成り立っている

先ほどのサンプルコードを見ると分かるように、HTMLの表は次のようなタグで構成されています。

HTMLの表は、以下のように「開始タグ < >」と「閉じタグ </>」を使って、「大きな箱の中に、さらに小さな箱を規則正しく並べる」という入れ子構造（親子関係）になっています。

テーブルの基本構造イメージ
【 <table> 表の全体枠 】
  │
  ├──【 <caption> 表のタイトル </caption> 】
  │
  ├──【 <tr> 1行目の枠 】
  │     ├──【 <th> 見出しセル </th> 】
  │     └──【 <th> 見出しセル </th> 】
  │   【 </tr> 1行目おわり 】
  │
  └──【 <tr> 2行目の枠 】
        ├──【 <td> データセル </td> 】
        └──【 <td> データセル </td> 】
      【 </tr> 2行目おわり 】
  │
【 </table> 表の全体枠おわり 】

このようにテーブルは 「 <table> → <caption></caption> → <tr> → <th></th> → <td><td> → </tr> → </table>」 という厳格な入れ子構造で作られます。
この入れ子構造が崩れると、ブラウザが自動的に補完して意図しない表示になるため、「正しい階層でタグを組む」ことが重要です。

table・tr・caption・th・tdタグの正しい書き方の手順

HTMLテーブルを作る際は、ソースコードを縦の列ではなく、横の行を上から順番に作っていくという流れを意識することで、表（テーブル）が迷わずスムーズに作成しやすくなります。
具体的な作成手順は以下の5つのステップです。
【見出しタグthを表のタイトル直下に並べる場合】

1. <table> と </table> で表の一番外側の枠（全体の土台）を作成
   まず、すべての土台となる <table> と </table> を書き、ここからが表のエリアであることを宣言します。
2. <caption> と </caption> を <table> と </table> の間に書いて表の見出しを作成
   表のタイトルとなる <caption> と </caption> を記述します。必ず <table> タグの直後（最初の <tr> より前）に記述するのが厳格なルールです。<tr> や <th> で囲う必要はありません。
3. <tr> と </tr> で表の行スペースを作成（行数分だけ作成）
   <caption></caption> のすぐ下に、行を作るための <tr> と </tr> を記述します。作成する表の行数分だけ <tr></tr>を記述しておきます。
4. <th> と </th> を最初の <tr> と </tr> の中に書いて表の見出しを作成
   先に作った <tr></tr> の中に、必要な見出しの数だけ <th></th> を並べて記述します。
5. <td> と </td> を見出しの数だけ <tr> と </tr> の間に入れて表のデータセルを作成
   各行のデータセル（<td></td>）の数は見出しタグ <th></th> の数と同じにします。

上記表のHTMLタグは下記のとおりです（色の装飾コードは省略しています）。

【見出しタグを1列目に並べる場合】

1. <table> と </table> で表の一番外側の枠（全体の土台）を作成
   まず、すべての土台となる <table> と </table> を書き、ここからが表のエリアであることを宣言します。
2. <caption> と </caption> を <table> と </table> の間に書いて表の見出しを作成
   表のタイトルとなる <caption> と </caption> を記述します。必ず <table> タグの直後（最初の <tr> より前）に記述するのが厳格なルールです。<tr> や <th> で囲う必要はありません。
3. <tr> と </tr> で表の行スペースを作成（行数分だけ作成）
   <caption></caption> のすぐ下に、行を作るための <tr> と </tr> を記述します。作成する表の行数分だけ <tr></tr>を記述しておきます。
4. 「1行目」の中に、先頭の見出し（<th></th>）と、それに続くデータ（<td></td>）をすべて書き、表の1行目を作成
   先に作った <tr> と </tr> の間に、まず1列目の見出しとなる <th></th> を書きます。そして、そのまま同じ行（<tr> と </tr>）の中で、右側に続くデータの数だけ <td></td> を続けて記述します。これで、1列目が「見出し」、2列目以降が「データ」となる1行目（横一列）が完全に完成します。
5. 2行目以降も「まったく同じ手順」で、上から下へと順番に各行を完成させていく
   4の手順とまったく同じように、最初に見出し（<th></th>）を1つ書き、その後にデータ（<td></td>）を並べます。この「横一行を完成させてから次の行に進む」作業を上から順に繰り返します。すべての行で、<tr> と </tr> の内側に入るタグの総数（<th></th> と <td></td> の合計）が同じになっていれば、きれいな表が完成します。

上記表のHTMLタグは下記のとおりです（色の装飾コードは省略しています）。

なお、<caption></caption> と <th></th> については使用しなくても表（テーブル）の表示は崩れません。

ただし、HTML Living Standardでは、「テーブルタグは装飾目的ではなく、正しいデータ表として使うこと」と決められていますので、見出しを意味する <th></th> が一箇所もない表は、「不適切な構造の表」とみなされてしまう可能性があります。
表を作成するときは <caption></caption> は無くても問題ありませんが、<th></th> は必ず入れるようにしてください。

＞＞ホームページで表を作るHTMLテーブルタグtable･caption･tr･th･tdの意味･注意点

表の構造をさらに明確にする3つの応用タグ（グループ化）

基本の5つのタグ（table・tr・caption・th・td）だけでも表は完成しますが、HTML Living Standardに沿った、より意味の分かりやすいテーブルにするために、表の要素を「グループ化」する応用タグ（thead・tbody・tfoot）があります。

thead・tbody・tfootタグの記述は必須ではありませんが、これらを使うことで、検索エンジンやブラウザに「どこが見出しで、どこが本体データか」を明確に伝えることができます。

・<thead>（Table Head）
表の見出し行（ヘッダー部分）をひとまとめにするタグです 。

・<tbody>（Table Body）
表のメインデータ（本体部分）をひとまとめにするタグです。

・<tfoot>（Table Foot）
表の最下部にある、合計値や補足説明（フッター部分）をひとまとめにするタグです。

グループ化タグthead・tbody・tfootを取り入れたコード例

<caption>売上表</caption>
<thead>
<tr>
<th>商品名</th>
<th>売上数</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>10個</td>
</tr>
<tr>
<td>みかん</td>
<td>12個</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td>22個</td>
</tr>
</tfoot>

表の装飾やレイアウトはCSSで！古いHTML属性やレイアウト目的でのテーブル使用は非推奨

HTMLでは、<table> タグは料金表やサービス一覧、スケジュール表など、表形式のデータを表示するための要素ですが、表の見た目を整える装飾やページ全体のレイアウトはCSSで行うのが標準的な方法となっています。

テーブルの装飾はCSSで行う

表の罫線や背景色、文字色、余白などのデザインは、HTMLではなくCSSで指定します。

例えば、次のような装飾はCSSで設定します。
・枠線（border）
・背景色（background-color）
・文字色（color）
・セルの余白（padding）
・横幅（width）
・高さ（height）
・文字の配置（text-align）

HTMLは「表の構造」を記述し、CSSは「見た目」を整えるという役割分担が現在のWeb制作の基本です。

レイアウト目的でtableタグを使用しない

以前は、Webページ全体のレイアウトを作るために

タグが使われることがありました。例えば、ヘッダー・サイドバー・本文などを表のセルで区切ってページを構成する「テーブルレイアウト」が一般的だった時代もあります。しかし現在では、このような使い方は推奨されていません。
ページレイアウトはCSSのFlexboxやGridなどを使用し、<table> タグはデータを整理して表示する場合だけ使用ししてください。bgcolor属性などの古いHTML属性は現在では使用しないHTML4以前では、次のような属性で表の見た目を指定することが一般的でした。<table border=”1″ bgcolor=”#eeeeee” cellpadding=”10″>しかし、これらの属性は現在のHTML Living Standardでは非推奨（または廃止）となっています。代表的な古い属性には次のようなものがあります。
・bgcolor
・border
・align
・cellpadding
・cellspacing現在では、これらの設定はすべてCSSで行います。古い属性を使うとSEOに悪影響はある？現在のブラウザや検索エンジンは古いHTMLも適切に解釈できるため、既存サイトでこれらの属性が使われていても、すぐに表示やSEOに大きな問題が発生するわけではありません。
bgcolorやborderなどの古いHTML属性を使用しているからといって、Google検索で直接順位が下がるということも今はありません。ただし、HTML Living Standardではこれらの属性は非推奨となっており、新しくWebサイトを作成する場合は使用しないことが推奨されています。
HTMLは構造を記述し、デザインはCSSで管理することで、保守性や可読性が向上し、将来的な修正もしやすくなります。そのため、現在のWeb制作では、表の装飾やレイアウトはCSSで行うのが基本と考えておいてください。