Webサイトを閲覧していると、製品のスペック比較表や料金プラン、イベントのスケジュール表などを頻繁に目にします。
これらの構造化されたデータを適切に表示するために欠かせないのが、HTMLのテーブル要素です。
HTMLで表を作成するスキルは、Web制作における基礎中の基礎でありながら、正しくマークアップすることでアクセシビリティの向上にもつながります。
2026年現在のWeb標準においても、表形式のデータを表現する手段としてtableタグの使用は強く推奨されています。
本記事では、初心者の方でも迷わずに表を作成できるよう、基本構造から応用的なコーディング手順までを詳しくお伝えします。
tableタグの基本構造と主要な構成要素
HTMLで表を作成する際は、複数のタグを組み合わせて階層構造を作る必要があります。
最も外側を囲むのが<table>タグであり、その中に「行」や「セル」を定義するタグを配置していきます。
基本的な表を構成するのは、主に以下の3つのタグです。
<tr>：Table Rowの略で、表の「行」を定義します。<th>：Table Headerの略で、表の「見出しセル」を定義します。<td>：Table Dataの略で、表の「データセル」を定義します。
これらのタグを適切に配置することで、ブラウザは「どこが行で、どこが見出しなのか」を正しく認識できるようになります。
まずは、最もシンプルな表のコード例を確認してみましょう。
<!-- シンプルな料金表の例 -->
<table>
<tr>
<th>プラン名</th>
<th>月額料金</th>
</tr>
<tr>
<td>スタンダード</td>
<td>1,000円</td>
</tr>
<tr>
<td>プレミアム</td>
<td>2,000円</td>
</tr>
</table>プラン名 月額料金
スタンダード 1,000円
プレミアム 2,000円tableタグ：表の土台を作る
<table>タグは、表全体をカプセル化するコンテナの役割を果たします。
このタグがないと、内部の<tr>や<td>は正しく機能しません。
現代のコーディングでは、表の枠線や背景色などの見た目はCSSで制御するのが一般的です。
そのため、<table>タグ自体には「border」属性などを直接記述せず、クラス名を付与して管理するのがベストプラクティスです。
trタグ：横一行を定義する
<tr>タグは、表の中の水平方向の一行を定義するために使用します。
表に3つの行を作りたい場合は、<table>の中に3つの<tr>を記述することになります。
<tr>タグの直下には、必ず<th>または<td>を配置しなければなりません。
thタグとtdタグ：セルの役割を使い分ける
<th>は「見出し」を意味し、通常は太字で中央揃えに表示されることが多い要素です。
一方、<td>は「具体的な値」を入れるためのセルであり、左揃えで表示されるのが一般的です。
セマンティックなマークアップ（意味のある記述）を行うためには、これらを明確に使い分けることが重要です。
音声読み上げソフトなどのスクリーンリーダーを利用するユーザーにとって、<th>が正しく設定されているかどうかは、表の内容を理解する大きな助けとなります。
より高度な表の構成：thead、tbody、tfoot
表の規模が大きくなる場合や、より厳密な構造を定義したい場合には、行をグループ化するタグを使用します。
これらを使用することで、ブラウザや検索エンジンに対して、表のどの部分がヘッダーで、どこが本体なのかを明示できます。
theadタグ：ヘッダー部分のグループ化
<thead>は、表の見出し行（ヘッダー）をまとめるためのタグです。
通常、表の最上部に位置する見出し項目をこの中に含めます。
これを記述しておくことで、CSSでのスタイリングが容易になるだけでなく、長い表を印刷する際に各ページにヘッダーを自動で繰り返し表示させる設定などが可能になります。
tbodyタグ：本体部分のグループ化
<tbody>は、表のメインデータが含まれる行をまとめるタグです。
一つの表の中に複数の<tbody>を存在させることも可能で、セクションごとにデータを分けたい場合に役立ちます。
デフォルトでは明示しなくてもブラウザが自動的に補完することが多いですが、コードの可読性を高めるために記述しておくことが推奨されます。
tfootタグ：フッター部分のグループ化
<tfoot>は、表の要約や合計値などを表示するフッター行をまとめるタグです。
例えば、請求書の明細表などで最後に合計金額を表示する場合などに使用します。
HTML5以降では、<tfoot>は<tbody>の後ろに記述するのが一般的となっています。
<!-- 構造化された表の例 -->
<table>
<thead>
<tr>
<th>商品名</th>
<th>単価</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>リンゴ</td>
<td>150円</td>
<td>3個</td>
</tr>
<tr>
<td>バナナ</td>
<td>100円</td>
<td>2房</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td colspan="2">650円</td>
</tr>
</tfoot>
</table>セルの結合：colspanとrowspanの使い方
複雑な表を作成する際、隣り合うセルを一つにまとめたい場合があります。
Excelでの「セルの結合」に相当する機能が、HTMLの属性として用意されています。
colspan：横方向に結合する
colspan属性は、指定した数値の分だけ「列」を横に結合します。
例えば、<td colspan="2">と記述すると、そのセルは2列分の幅を持つようになります。
この属性を使用する場合、結合された分だけ後の<td>や<th>の数を減らさなければ、表のレイアウトが崩れてしまうので注意が必要です。
rowspan：縦方向に結合する
rowspan属性は、指定した数値の分だけ「行」を縦に結合します。
例えば、同じカテゴリが複数の行にわたる場合などに、左端の見出しを一つにまとめるために使われます。
縦方向の結合は、次の行のセルの数にも影響を与えるため、記述ミスが起きやすいポイントです。
<!-- 縦横の結合を組み合わせた例 -->
<table>
<tr>
<th rowspan="2">時間帯</th>
<th colspan="2">メニュー</th>
</tr>
<tr>
<th>食事</th>
<th>飲み物</th>
</tr>
<tr>
<td>朝</td>
<td>トースト</td>
<td>コーヒー</td>
</tr>
</table>アクセシビリティを高めるキャプションとscope属性
表の内容をより分かりやすくするために、HTMLには補助的なタグや属性が用意されています。
これらを活用することで、SEO効果を高め、あらゆるユーザーに優しいWebサイトを目指すことができます。
captionタグ：表にタイトルを付ける
<caption>タグは、表のすぐ上に表示される「タイトル」や「説明」を定義します。
このタグは必ず<table>タグの開始直後に記述しなければなりません。
表が何を意味しているのかを一目で伝えることができるため、情報の整理に非常に役立ちます。
scope属性：見出しの範囲を明示する
<th>タグに付与するscope属性は、その見出しが「列（col）」に対するものか、「行（row）」に対するものかを指定します。
例えば、<th scope="col">と書けば、そのセルは縦方向の列の見出しであることを意味します。
これはブラウザ上の見た目には変化を与えませんが、スクリーンリーダーが表を読み上げる際の正確性を劇的に向上させます。
CSSによるテーブルのスタイリング
HTMLで構造を作った後は、CSSを使って見た目を整える必要があります。
デフォルトの状態では枠線が表示されないことが多いため、最低限必要なスタイルを当てるのが一般的です。
border-collapse：枠線を重ねる
テーブルの枠線をきれいに一本の線で表示するには、border-collapse: collapse;を指定します。
これを行わないと、セルごとに独立した枠線が表示され、二重線のような見た目になってしまいます。
パディングと背景色の調整
文字と枠線の間隔を調整するpaddingや、見出しを強調するためのbackground-colorを設定しましょう。
2026年のモダンなWebデザインでは、1行ごとに背景色を変える「ストライプデザイン」もよく用いられます。
これはCSSの:nth-child(even)などの擬似クラスを使うことで簡単に実装できます。
/* テーブルの基本スタイル例 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
/* 1行おきに色を変える */
tbody tr:nth-child(even) {
background-color: #fafafa;
}レスポンシブデザインへの対応
スマートフォンでの閲覧が増えている現在、横幅の広いテーブルをどのように表示するかは重要な課題です。
テーブルは本来、内容に合わせて横に広がる性質を持っているため、画面からはみ出してしまうことがあります。
横スクロールの実装
最も簡単な解決策は、テーブルを<div>などのコンテナで囲み、CSSで横スクロールを許可することです。
overflow-x: auto;を設定することで、小さな画面でも指でスライドさせて表全体を確認できるようになります。
表示形式の切り替え
より高度な手法としては、メディアクエリを使用して、スマホ画面では表の形式を崩し、ブロック要素のように縦に並べる方法もあります。
データの量や性質に応じて、最適なレスポンシブ対応を選択することが求められます。
よくあるコーディングミスと注意点
HTMLテーブルの作成中に陥りやすいミスをいくつか紹介します。
まず、<table>タグの閉じ忘れや、<tr>の中に入れ子にするタグの間違いに注意しましょう。
また、結合属性（colspan/rowspan）を使用する際、計算が合わずに表が歪んでしまうことがよくあります。
作成後は、必ずデベロッパーツールなどで意図した通りの構造になっているか確認する習慣をつけましょう。
さらに、レイアウト目的（例えば、サイトの左右のカラム分けなど）でテーブルを使用することは現在では非推奨です。
レイアウトにはFlexboxやCSS Gridを使用し、テーブルはあくまで「データの一覧」を表示するために使用するのが正しいルールです。
まとめ
HTMLでテーブルを作成するには、基本的なタグの役割を理解し、正しい階層構造を意識することが大切です。
<table>、<tr>、<th>、<td>の4つを使いこなすだけで、大半の表は作成可能です。
その上で、<thead>やscope属性などを活用することで、よりアクセシブルで高品質なWebサイトを構築できます。
見た目の調整はCSSに任せ、HTMLではデータの「構造」を正しく記述することに専念しましょう。
今回学んだ基礎をベースに、実際のプロジェクトで様々な表のコーディングに挑戦してみてください。