HTMLで表を作るtableタグの書き方tr・th・tdタグの使い方をホームページ作成初心者に解説

ホームページで表（テーブル）を作成する際、インターネット上で見つけたコードをコピーして利用しているだけでは、各タグの役割や正しい書き方を理解しないままになりがちです。

HTMLの表は複雑に見えますが、基本的にはtableタグ・trタグ・thタグ・tdタグの4つを組み合わせるだけで作成できます。さらに、表のタイトルを付けるためのcaptionタグも含めて、基本構造を正しく理解することが重要です。

一方で、インターネット上には古いHTMLの解説記事も多く残っています。
表の幅や高さ、枠線、背景色などをHTMLの属性で指定する方法を紹介している記事もありますが、現在のWeb制作では、HTMLで表の構造を作成し、見た目の装飾はCSSで行う方法が標準となっています。

後から修正やメンテナンスをしやすいホームページを作成するためには、「HTMLは構造」「CSSは装飾」という役割分担を理解しておくことが重要です。

ここでは、ホームページ作成初心者向けに、HTMLで表を作成するために必要なtableタグ・trタグ・thタグ・td・captionタグの役割と基本的な書き方を解説します。

【この記事で学べる内容】
・表作成に必要な4つの基本タグ（table・tr・th・td・caption）の役割
・コピペで利用できるシンプルな表のサンプルコード
・行や列を追加して表を作成する方法
・現在では推奨されていない古いHTMLの書き方
・HTML（構造）とCSS（装飾）の役割の違い

なお、ここではHTMLによる表の構造（骨組み）の作成方法を中心に解説します。表のデザインや装飾、罫線の設定、背景色の変更などについては、別記事でCSSを使った方法を詳しく解説します。

まずは、HTMLで表を作成するための基本から見ていきましょう。

HTMLで表を作るには？

HTMLで「表（テーブル）」を作成するときに中心となるのが<table>タグです。このタグは、テキストや数値などの情報を縦横の格子状に整理し、表形式のデータを表示するためのタグとして使用します。

料金表や比較表などに利用される

Webサイトでは、以下のようなデータを整理してユーザーに分かりやすく伝えるために広く利用されています。
・サービスの料金表やプランの比較
・商品のスペックや特徴の比較表
・店舗の営業時間や営業日カレンダー
・イベントのタイムスケジュール表

例えば、次のようなデータは表形式で表示すると見やすくなります。

HTMLテーブルを構成する基本タグ（table・tr・th・td）

HTMLの表は、<table>タグの中に<tr>、<th>、<td>などの複数の異なる役割を持ったタグを階層状に組み合わせて作成します。
先ほどの表のtableタグを示すと下記のようになります。

　<tr>
　　<td style="width: 33.3333%; text-align: center;">プラン</td>
　　<td style="width: 33.3333%; text-align: center;">月額料金</td>
　　<td style="width: 33.3333%; text-align: center;">容量</td>
　</tr>
　<tr>
　　<td style="width: 33.3333%; text-align: center;">Aプラン</td>
　　<td style="width: 33.3333%; text-align: center;">1,000円</td>
　　<td style="width: 33.3333%; text-align: center;">10GB</td>
　</tr>
　<tr>
　　<td style="width: 33.3333%; text-align: center;">Bプラン</td>
　　<td style="width: 33.3333%; text-align: center;">2,000円</td>
　　<td style="width: 33.3333%; text-align: center;">50GB</td>
　</tr>
　<tr>
　　<td style="width: 33.3333%; text-align: center;">Cプラン</td>
　　<td style="width: 33.3333%; text-align: center;">3,000円</td>
　　<td style="width: 33.3333%; text-align: center;">100GB</td>
　</tr>

tableタグ（テーブル全体を囲む）

HTMLで表として作成する場合、まず<table>と</table>で表全体を囲み、その中に行やセルを配置していきます。

　この中に、行やセルのタグを書いていきます。

なお、ページのレイアウト目的でtableタグを使用することは推奨されていません。
過去には <table> タグを使ってWebページ全体のレイアウトを組む方法もありましたが、現在はFlexboxやGridなどのCSSレイアウト機能を利用するのが一般的です。
<table> タグはあくまでも「表形式のデータを表示するためのタグ」として使用することが重要です。

trタグ（行を作成する）

trは、「Table Row（テーブルの行）」の略で、表の「行（横の並び）」を作成するタグです。
表の中に3行作りたい場合は、<tr></tr>タグを3つ記述します。
すべてのセルは、必ずこの<tr>と</tr>の間に配置する必要があります。

　<tr>
　　この中に、行やセルのタグを書いていきます。
　</tr>
　<tr>
　　この中に、行やセルのタグを書いていきます。
　</tr>
　<tr>
　　この中に、行やセルのタグを書いていきます。
　</tr>

tdタグ（データセルを作成する）

tdは、「Table Data（テーブルのデータ）」の略で、表の「データセル（中身）」を作成するタグです。
見出しに対応する具体的な数値やテキストなどの内容を記述します。
表の中に3行、3列作りたい場合は、それぞれの <tr></tr> タグ内に <td></td> を3つ記述します。

　<tr>
　　<td> セル内データ </td>
　　<td> セル内データ </td>
　　<td> セル内データ </td>
　</tr>
　<tr>
　　<td> セル内データ </td>
　　<td> セル内データ </td>
　　<td> セル内データ </td>
　</tr>
　<tr>
　　<td> セル内データ </td>
　　<td> セル内データ </td>
　　<td> セル内データ </td>
　</tr>

thタグ（見出しセルを作成する）

thは、「Table Header（テーブルの見出し）」の略で、表の「見出しセル」を作成するタグです。
主に表の1行目や1列目で、その後に続くデータの「項目名」を示すために使用します。
一般的なブラウザでは、自動的に太字で中央揃えに表示されます。
【thタグを3列3行の表で1行目に利用する例】

　<tr>
　　<th> 3列のときの1列目1行目の項目名 </th>
　　<th> 3列のときの2列目1行目の項目名 </th>
　　<th> 3列のときの3列目1行目の項目名 </th>
　</tr>
　<tr>
　　<td> 3列のときの1列目2行目の項目名 </td>
　　<td> 3列のときの2列目2行目の項目名 </td>
　　<td> 3列のときの3列目2行目の項目名 </td>
　</tr>
　<tr>
　　<td> 3列のときの1列目3行目の項目名 </td>
　　<td> 3列のときの2列目3行目の項目名 </td>
　　<td> 3列のときの1行目3列目の項目名 </td>
　</tr>

【thタグを3列3行の表で1列目に利用する例】

　<tr>
　　<th> 1列目1行目の項目名 </th>
　　<td> 2列目1行目のセル内データ </td>
　　<td> 3列目1行目のセル内データ </td>
　</tr>
　<tr>
　　<th> 1列目2行目の項目名 </th>
　　<td> 2列目2行目のセル内データ </td>
　　<td> 3列目2行目のセル内データ </td>
　</tr>
　<tr>
　　<th> 1列目3行目の項目名 </th>
　　<td> 2列目3行目のセル内データ </td>
　　<td> 3列目3行目のセル内データ </td>
　</tr>

HTMLテーブルを作ってみよう

基本の4つのタグ（table・tr・th・td）を組み合わせた、最もシンプルで標準的なコードの例です。

　<tr>
　　<th>プラン</th>
　　<th>月額料金</th>
　</tr>
　<tr>
　　<td>Aプラン</td>
　　<td>1,000円</td>
　</tr>

【ブラウザでの表示結果】
上記のコードをブラウザで表示すると、以下のように出力されます。

この段階では、まだ表の枠線（罫線）は表示されず、文字が横に並んだだけの状態になります。
ChromeやSafariなどの一般的なブラウザでは、見出しである <th> の部分が自動的に「太字・中央揃え」になり、環境によっては薄いグレーの背景色が付くこともあります。
ただし、この段階では「外枠やセルを区切る線（罫線）」はまだ表示されません。
文字が並んでいるだけで表らしく見えなくても、HTMLの構造としてはこれで完全に正解です。枠線を引くなどの本格的な見た目の装飾は、後述のCSSで行います。

行と列を追加する方法

作成した表を大きくしたい場合は、対応するタグを追加していきます。

行を追加する（trタグを追加する）

表の「縦方向（下方向）」にデータを増やしたいときは、 <tr>〜</tr> のブロックを丸ごと追加します。

　<tr>
　　<th>プラン</th>
　　<th>月額料金</th>
　</tr>
　<tr>
　　<td>Aプラン</td>
　　<td>1,000円</td>
　</tr>
　<!-- 新しい行を追加 -->
　<tr>
　　<td>Bプラン</td>
　　<td>2,000円</td>
　</tr>

【ブラウザでの表示結果】
上記のコードをブラウザで表示すると、以下のように出力されます。

列を追加する（thタグやtdタグを追加する）

表の「横方向（右方向）」に項目を増やしたいときは、それぞれの <tr> の中に、 <th> や <td> を1つずつ追加します。

　<tr>
　　<th>プラン</th>
　　<th>月額料金</th>
　　<th>容量</th>　<!-- 列を追加 -->
　</tr>
　<tr>
　　<td>Aプラン</td>
　　<td>1,000円</td>
　　<td>10GB</td>　<!-- 列を追加 -->
　</tr>

【ブラウザでの表示結果】
上記のコードをブラウザで表示すると、以下のように出力されます。

上の行と下の行でセルの数がズレてしまうと、表の形が崩れる原因になります。各 <tr> の中にあるセルの数は必ず一致させてください。

表にタイトルを付けるcaptionタグ

表を作成する際、その表が「何を表しているのか」という表全体のタイトル（表題）を付けるために使用するのが <caption> タグです。
ブラウザによって表示位置は異なりますが、多くの場合は表の上部に表示されます。
captionタグは必須ではありませんが、表の意味を明確にするため、必要に応じて使用します。

captionタグの役割

<caption> タグは、表全体のタイトル（見出し）を表示するためのタグですが、画面上でユーザーにタイトルを伝えるだけでなく、検索エンジンや画面読み上げソフト（スクリーンリーダー）に対して「これが何についての表なのか」を正しく伝える重要な役割を持っています。

captionタグの書き方のルール

<caption> タグを使用する際は、記述する「位置」に厳格なルールがあります。
必ず <table> の開始タグの直後（1番最初）に記述しなければなりません。
<tr> や <td> の後に書くとエラーになるため注意してください。

　<caption>【料金プラン一覧表】</caption> <!-- 必ずtableの直後に書く -->
　<tr>
　　<th>プラン</th>
　　<th>月額料金</th>
　　<th>容量</th>
　</tr>
　<tr>
　　<td>Aプラン</td>
　　<td>1,000円</td>
　　<td>10GB</td>
　</tr>

【ブラウザでの表示結果】
上記のコードをブラウザで表示すると、以下のように出力されます。

<caption> タグで囲んだテキストは、自動的に表の「上のプロット中央」に配置されます。
こちらも他のタグと同様、文字の大きさや色などの細かい見た目のデザインは、CSSを使って調整するのが現在のルールです。
まずは「表のタイトルは<caption> で書く」という基本を押さえておいてください。

HTML Living Standardでは装飾をCSSで行う

現在のWeb標準規格である「HTML Living Standard」では、HTMLとCSSの役割分担が厳格に定められています。

昔はHTML属性で装飾していた

過去（旧HTML4世代など）のWeb制作では、以下のように <table> タグや <td> タグの中に直接、見た目を変更するための属性を記述していました。

当時よく使われていた主な装飾用属性は
・border（枠線の太さを指定する）
・width（表やセルの横幅を指定する）
・height（表やセルの高さを指定する）
・bgcolor（表やセルの背景色を指定する）
です。
しかし、これらデザインに関する属性は、HTML Living Standardではすべて非推奨となっています。
「HTMLはあくまで文章の構造を記述するもの」であり、「見た目の装飾はすべてCSSで指定する」というのが現代の正しいルールです。

CSSで罫線を付ける例

table {
　　border-collapse: collapse;
}

/* 各セルにグレーの枠線を引き、文字の周りに余白を作る */
th, td {
　　border: 1px solid #ccc;
　　padding: 8px;
}

/* 見出しセルの背景色をやや灰色い無彩色 */
th {
　background-color: #f5f5f5;
}

このようにHTMLから装飾を完全に切り離すことで、コードがシンプルになり、後からのデザイン変更や修正が圧倒的にスムーズになります。

CSSによるテーブル（表）の装飾については、別記事で紹介します。

HTMLテーブル作成時の注意点

HTMLの <table> タグを使って表を作成する際には、基本構造を正しく理解することに加えて、いくつか注意すべきポイントがあります。
こを押さえておくことで、見やすく管理しやすいHTMLを作成でき、検索エンジンにもWebサイトの構造を正しく伝える（SEO対策）ことができます。

・レイアウト目的でtableタグを使用しない
<table> タグは本来、データを表形式で整理して表示するためのタグです。
過去にはWebページ全体のレイアウト（ページ構成）を組むために <table> タグが使われていた時期もありましたが、現在のWeb制作では推奨されていません。

レイアウト目的には、CSSのFlexboxやGridを使用するのが一般的です。
<table> タグはあくまで「表データの表示」に限定して使用します。

・thタグとtdタグの使い分けを意識する
表を作成する際は、見出しとデータを正しく分けることが重要です。
・thタグ：項目名や見出し
・tdタグ：具体的なデータ

例えば、料金表では「プラン名」「価格」などはthタグを使用し、それに対応する内容はtdタグを使用します。
この区別を明確にすることで、表の構造が分かりやすくなり、アクセシビリティの向上にもつながります。

・シンプルな構造を意識する
HTMLテーブルは、必要以上に複雑にしないことが重要です。

まずは以下の基本構造を正しく書くことを優先します。
・table（表全体）
・tr（行）
・th（見出し）
・td（データ）

装飾や高度な構造は後から追加できますが、基本構造が崩れていると修正が難しくなります。

・CSSとの役割分担を意識する
HTMLテーブルでは、「HTMLは構造」「CSSは装飾」という役割分担が基本です。
HTMLで枠線や背景色などの見た目を調整しようとすると、後からの修正が難しくなりますし、非推奨の使い方です。
デザインはCSSで管理することで、再利用性と保守性が高くなります。
 
＞＞HTMLの表でセルを横結合するcolspan、縦結合するrowspanテーブル（table）タグ解説