HTMLで表を作るには、「<table></table>」 や 「<caption></caption>」、「<tr></tr>」、「<th></th>」、「<td></td>」 など、たくさんのタグを組み合わせてコードを書く必要があります。
しかし、それぞれのタグが持つ「本当の意味」や「正しいルール」を曖昧なまま使ってしまい、表がうまく表示されなかったり、不適切なコードになってしまったりするケースが少なくありません。
実は、現在のWeb標準規格（HTML Living Standard）において、テーブルタグはただ「見た目を整えるもの」ではなく、検索エンジンや画面読み上げソフトに表の構造を正しく伝える「アクセシビリティ（情報の伝わりやすさ）」の観点から、非常に厳格なルールが定められています。
「見た目が太字になるからという理由だけで <th></th> を使っていませんか？」
「表のタイトル（<caption></caption>）を、1列目の横に並べて書いていませんか？」
ここでは、ホームページで表を構成する5つの基本タグ（table・caption・tr・th・td）について、それぞれの意味や役割、そして初心者が陥りがちな注意点を詳しく解説します。
表の骨組みを作る「5つの基本タグ」の役割
先ほどのサンプルコードに登場した5つのタグには、それぞれ明確な役割があります。これらを組み合わせることで、どんな表でも作ることができます。
tableタグ（表全体を作る） <table></table>
<table>タグは、HTMLで表（テーブル）全体を囲むためのタグです。表を作成するときは必ず使用し、<tr>や<th>、<td>などのタグを<table>タグの中に記述します。
HTMLでは、<table>タグが「ここからここまでが一つの表である」ことをブラウザや検索エンジンに伝える役割を持っています。
注意点<table>タグを使用する際は、次のポイントを押さえておいてください。
・<table>タグだけでは表は完成しない
<table> タグは表全体を囲むだけのタグです。実際の内容は、 <tr> ・ <th> ・ <td> などを組み合わせて作成します。
・レイアウト目的で使用しない
昔はページレイアウトを作るために <table> タグが使われていましたが、現在では推奨されていません。レイアウトにはCSS（FlexboxやGridなど）を使用し、<table> タグは料金表や比較表、スケジュール表など、表形式のデータを表示するときだけ使用してください。
・見出しやタイトルも適切に設定する
表の見出しには <th> 、表のタイトルには <caption> を使用すると、HTMLの構造が分かりやすくなり、アクセシビリティの向上にもつながります。
captionタグ（表タイトル） <caption></caption>
<caption> タグは、HTMLテーブルにタイトルを付けるためのタグです。<caption> タグは、<tabled> タグの開始タグの直後に記述します。
<caption> タグを付けることで、表が「何についての情報をまとめたものなのか」を示す役割があり、表の内容を利用者に分かりやすく伝えられます。
例えば、営業時間や料金表、サービス一覧などの表を掲載する場合は、<caption> タグを使用して表のタイトルを付けるのがおすすめです。
アクセシビリティ上のメリット
<caption> タグを使用すると、表の内容を利用者に分かりやすく伝えられるだけでなく、アクセシビリティの向上にもつながります。
スクリーンリーダーなどの支援技術では、表を読み上げる前に <caption> の内容が案内されるため、利用者は「これからどのような表が表示されるのか」を理解しやすくなります。
また、表のタイトルをHTMLとして明示できるため、意味のある構造を持ったテーブルを作成できます。
注意点<caption> タグを使用する際は、次の点に注意してください。
・<caption> は1つの表につき1つだけ使用する
1つの <table> に複数の <caption> タグは記述できません。表を表すタイトルは1つだけ設定します。
・表の内容が分かるタイトルを付ける
「一覧」や「表」だけでは内容が伝わりません。「営業時間」「料金一覧」「サービス内容」のように、表の内容が分かるタイトルを付けてください。
・見出し（h2・h3）の代わりにはしない
<caption> は表専用のタイトルです。ページ全体の見出しやセクションタイトルには、<h1> 〜 <h6> タグを使用します。
・<table> タグの直後に記述する
<caption> は <table> タグ内の最初の子要素として記述します。<tr> や <thead> の後に書かないようにしてください。
・1列目にタイトルタグ（<caption>）を書いてはいけない
表のタイトル（名前）を決める <caption> タグについては、<th> とは異なり、HTML Living Standardで「必ず <table> タグの直後（最初の1行目の前）に書かなければならない」という厳格なルールがあります。
「1列目を見出しにするから、タイトルの <caption> も1列目の横に並べよう」とコードに混ぜて書くことは仕様違反（エラー）になります。
これにはアクセシビリティ（目で見ることが難しい方への配慮）の重要な理由があります。目の不自由な方が使う「画面読み上げソフト（スクリーンリーダー）」は、表に到達した際、まず最初に <caption> を読み上げて「これが何の表か」をユーザーに伝えます。もしタイトルの位置が1列目の途中に紛れ込んでいると、ソフトが表の構造を正しく解析できなくなり、ユーザーに情報が伝わらなくなってしまいます。
見た目を左側にしたいときは？
HTMLコード上は必ず最初に書きますが、どうしても見た目（デザイン）として表の左側にタイトルを表示させたい場合は、CSSを使って視覚的な位置だけをコントロールするのが正しい方法です。
trタグ（行を作る） <tr></tr>
<tr> タグは、HTMLテーブルの「行（Row）」を作成するためのタグです。<table> タグの中で使用し、1つの <tr> タグが表の横一列を表します。例えば、3行の表を作る場合は、<tr> タグを3つ記述します。
<tr> タグの中には、見出しセルを表す <th> や、データセルを表す <td> を配置して、1行分のデータを作成します。
注意点<tr> タグを使用する際は、次のポイントを押さえておいてください。
・<tr> タグだけでは表は表示されない
<tr> タグは表の「行」を作るためのタグです。<tr> タグだけでは表として表示されず、行の中に見出しセルを表す <th> タグや、データセルを表す <td> タグを記述して初めて内容が表示されます。
・<tr> タグは必ず <table> タグの中に記述する
<tr> タグは、必ず <table> タグの中で使用します。<table> タグの外に記述すると、正しいHTML構造にならず、意図した表示にならない場合があります。
・1つの <tr> タグが表の1行になる
<tr> タグ1つが、表の横一列を表します。見出し行もデータ行も、それぞれ1つの <tr> タグで作成します。
・1行を追加したい場合は、新しい <tr> タグを追加する
表のデータを増やしたい場合は、新しい <tr> タグを追加します。追加した <tr> タグの中に <td> や <th> を記述することで、新しい行を簡単に作成できます。
・<tr>タグの中には <th> または <td> を記述する
<tr> タグは行の枠組みを作るタグです。実際に表示する内容は、見出しセルを表す <th> タグや、データセルを表す <td> タグを <tr> タグの中に記述します。<tr> タグだけでは、表の内容は表示されません。
thタグ（見出しセル） <th><th>
<th> タグは、HTMLテーブルの見出しセル（ヘッダーセル）を作成するためのタグです。表の列名や行名など、各データが何を表しているのかを示す見出しに使用します。
例えば、商品一覧の表で「商品名」「価格」「在庫」といった項目名は、<th> タグを使って記述します。
ブラウザでは、多くの場合 <th> タグの文字は太字で中央揃えで表示されますが、<th> タグの本来の役割は見た目ではなく、「見出しであること」を示すことです。
注意点<th> タグを使用する際は、次の点に注意してください。
・見出しセルには <th> タグを使用する
見出しを作る場合は、 <td> ではなく <th> を使用します。見た目はCSSで変更できますが、HTMLでは「見出し」であることを正しく表現することが重要です。
・見た目だけで <th> を使わない
<th> タグは文字を太字や中央揃えにするためのタグではありません。見た目を変更したい場合はCSSを使用し、 <th> タグは見出しセルとして必要な場合だけ使用してください。
・表の「左端（1列目）」を見出しにするときにも <th> を使用できる
「見出しタグは表の1行目（最上部）だけに書くもの」と思われがちですが、<th></th> は上部の見出しだけでなく、表の左端（1列目）を見出しにしたいときにも使用できます。
現在のWebの標準規格である「HTML Living Standard」の定義でも、<th></th> を配置する場所（1行目なのか、1列目なのか）に厳格な決まりはありません。大切なのは場所ではなく、「そのセルが、周りのデータ（<td>）の見出しとして機能しているか」です。
・1つの表の中で「何度でも（複数回）」使用できる
表のタイトルを決める <caption> タグは「1つの表に1回だけ（必ず最初）」という厳格な回数制限がありますが、<th> タグにはそのような制限はありません。1つの表の中で、必要であれば何回でも、どの場所でも使うことができます。
現在のWebの標準規格「HTML Living Standard」の定義でも、<th> を使える回数や場所に決まりはありません。
そのため、1行目や1列目だけでなく、例えば「表の途中でカテゴリごとに中見出しを挟みたいとき」や、「表の一番下に合計行の見出しを作りたいとき」などにも、制限なく <th> タグを配置することができます。
💡あちこちに見出しを置くときのポイント
表の途中など不規則な場所に見出し（<th>）をたくさん使う場合は、その見出しが「縦・横のどちらのデータに対応しているか」をブラウザや画面読み上げソフトに伝える scope（スコープ）属性 という便利な仕組みをセットで使うのが一般的です。
・<th> は表の中で必ず1回以上は使用する（<td> タグだけで表を作らない）
表（テーブル）を作成する際は、必ず1回以上は <th></th> タグを含めてください。見出しを1つも使わず、データを入れる <td></td> タグだけで表を完成させてはいけません。
これには、HTMLの役割に関する重要な理由があります。
かつての古いホームページ制作では、画面のレイアウト（メニューを左に置き、コンテンツを右に置くなどのデザイン）を整える目的で <table> タグが使われていました。しかし、現在のWeb標準（HTML Living Standard）では、「見た目のレイアウト目的でテーブルを使ってはならない」と厳格に決められています。
もし <th></th> が1つもない表を作ってしまうと、検索エンジンや画面読み上げソフトから「これはデータを表す正しい表ではなく、古いやり方でレイアウト目的で作られた不正な表だ」と判定されてしまうリスクがあります。
どれだけシンプルで小さな表であっても、「見出し（<th></th>）とデータ（<td></td>）がセットになって初めて正しい表になる」というルールを意識し、必ず1回以上は <th></th> を記述してください。
tdタグ（データセル） <td><td>
<td> タグは、HTMLテーブルのデータセルを作成するためのタグです。商品名や価格、営業時間など、表の実際のデータを入力するときに使用します。
見出しを表す <th> タグと組み合わせることで、見やすく分かりやすい表を作成できます。
注意点<td> タグを使用する際は、次の点に注意してください。
・<td> タグは必ず <tr> タグの中に記述する
タグだけを単独で記述することはできません。必ず <tr> タグの中に配置します。
・見出しには <td> ではなく <th> を使用する
「商品名」や「価格」などの見出しは <th> タグで記述し、実際のデータを <td> タグで入力します。
・見出しとデータの「列数」や「行のセル数」を必ず揃える
表をきれいに作成するための大原則は、「すべての行で、横に並ぶセルの合計数を同じにする」ことです。
- 1行目が見出しの場合：
最上行の見出しが「商品名」「価格」の2列であれば、その下に続く各データ行の中にも、必ず2つの<td></td>タグを記述して列数を揃えます。 - 1列目が見出し（今回のパターン）の場合：
各行の構成が「先頭の<th></th>（1つ） ＋ 後ろに続く<td></td>（2つ）」であれば、2行目も3行目も、まったく同じ「合計3つのセル」という構成で横の数を揃えます。もし、ある行だけ<td></td>が1つ多かったり少なかったりすると、表の右端がガタガタに崩れてしまい、正しく表示されなくなります。
