| テーブル全体を囲む | | ヘッダー行グループ（列見出しの行） | | ボディ行グループ（データ行） | | フッター行グループ（合計行など） | | テーブルの行（Table Row） | | | ヘッダーセル。標準で太字・中央揃え | | データセル（Table Data） | | | テーブルのタイトル（表の上に表示） | | | | |
ほかのタグも体系的に確認したい場合は、HTMLタグ一覧が便利です。
captionタグでテーブルにタイトルを付ける
表が何のデータなのかを示すのが <caption> です。<table> の直後に置くと、表の上にタイトルとして表示されます。
<table> <caption>2026年 Webツール料金比較</caption> <thead> <tr> <th>ツール名</th> <th>無料プラン</th> <th>有料プラン</th> </tr> </thead> <tbody> <tr> <td>Canva</td> <td>あり</td> <td>月額1,500円〜</td> </tr> <tr> <td>Figma</td> <td>あり</td> <td>月額$15〜</td> </tr> </tbody> </table>
<caption> は見た目の装飾だけでなく、読み上げ環境でも「この表のタイトル」として認識されます。表が複数並ぶページほど、付けておく価値が大きい要素です。
colspan・rowspanでセルを結合する
複数のセルをまとめたいときに使うのが colspan と rowspan です。属性に「いくつ分を結合するか」を数値で指定します。
colspan（横方向に結合）
colspan="2" なら、横に2列分のセルを1つにまとめます。
<table> <tr> <!-- 2列分を結合 --> <th colspan="2">氏名</th> <th>スコア</th> </tr> <tr> <td>田中</td> <td>太郎</td> <td>92</td> </tr> </table>
rowspan（縦方向に結合）
rowspan="2" なら、縦に2行分のセルを1つにまとめます。
<table> <tr> <!-- 2行分を結合 --> <td rowspan="2">午前</td> <td>HTML講座</td> </tr> <tr> <td>CSS講座</td> </tr> </table>
結合のコツは、結合した分だけ次の行のセル数を減らすことです。rowspan="2" を使った行の下は、その列のセルを書かずに詰めます。ここを揃えないと表が崩れるため、最初は紙に列数を書いて確認すると安全です。
scope属性でアクセシビリティに対応する
<th> に scope 属性を付けると、スクリーンリーダーがヘッダーとデータの関係を正しく読み上げます。見た目は変わりませんが、音声で読み上げる利用者にとっては理解度が大きく変わるポイントです。
<table> <thead> <tr> <th scope="col">商品名</th> <th scope="col">価格</th> <th scope="col">在庫</th> </tr> </thead> <tbody> <tr> <th scope="row">商品A</th> <td>1,000円</td> <td>50個</td> </tr> </tbody> </table>
指定できる値は2つです。
| scope値 | 意味 |
|---|
col | 列のヘッダーであることを示す |
row | 行のヘッダーであることを示す |
データ表で迷ったら、列見出しの <th> に scope="col"、各行の先頭見出しに scope="row" を付けておくと無難です。
テーブルのCSSスタイリング
標準のテーブルは罫線が二重に見えたり余白が窮屈だったりします。CSSで整えると、ぐっと読みやすくなります。
基本的なスタイル
table { width: 100%; border-collapse: collapse; /* セルの境界線を重ねる */ font-size: 14px; }
th, td { padding: 12px 16px; text-align: left; border: 1px solid #e0e0e0; }
th { background-color: #f5f5f5; font-weight: bold; }
/* ゼブラストライプ（縞模様） */ tbody tr:nth-child(even) { background-color: #fafafa; }
/* ホバー時のハイライト */ tbody tr:hover { background-color: #f0f7ff; }
ゼブラストライプ（行ごとの背景色）とホバーのハイライトは、行数の多い表で視線が迷子になりにくくなる実用的なテクニックです。
CSSの基礎から確認したい方は、CSSとは？書き方の基本・HTMLとの違いをわかりやすく解説を先に読むと理解が早まります。
border-collapseの違い
罫線の見え方を決めるのが border-collapse です。
/* separate（デフォルト）: セル間に隙間がある */ table { border-collapse: separate; }
/* collapse: 境界線が重なりすっきり見える */ table { border-collapse: collapse; }
データ表では collapse を指定するのが基本です。隙間が消え、罫線が1本にまとまって締まった見た目になります。
レスポンシブテーブル（スマホ対応）
テーブルはスマホで横幅が足りず、はみ出して崩れやすいのが弱点です。実用的な解決策は、表を囲むボックスに横スクロールを持たせる方法です。
<!-- テーブルをdivで囲む --> <div class="table-scroll"> <table> ... </table> </div>
.table-scroll { overflow-x: auto; /* 横スクロールを有効化 */ -webkit-overflow-scrolling: touch; }
/* テーブルの最小幅を設定（スクロール発生の基準） */ table { min-width: 600px; }
overflow-x: auto を付けたボックスでテーブルを囲み、テーブル側に min-width を指定しておきます。画面が狭いときだけ横スクロールが現れ、レイアウト全体は崩れません。
テーブルを使うべき場面・使わない場面
テーブルは万能ではありません。「行と列で意味がつながるデータ」に絞って使うのがポイントです。
テーブルが向いている場面 - 比較表：料金・スペック・機能の対照
- データの一覧：売上・スコア・スケジュール
- 構造化されたデータ：行と列の関係が明確なもの
テーブルを使わないほうがよい場面 - ページ全体のレイアウト目的：HTML4時代の手法で、現在は非推奨
- サイドバーと本文の段組み：FlexboxやGridで組む
- 単なる装飾の枠組み：意味のないデータを表に押し込まない
レイアウト目的でテーブルを使った例が次です。これは避けてください。
<!-- レイアウト目的でtableを使うのは非推奨（HTML4時代の手法） --> <table> <tr> <td>左サイドバー</td> <td>メインコンテンツ</td> </tr> </table>
レイアウトはFlexboxやGrid（CSS）で行うのが現代のHTML/CSSの原則です。テーブルは「データ表示専用」と割り切ると、迷いがなくなります。
よくある質問
テーブルの学習でつまずきやすいポイントを、Q&A形式で整理しました。
Q. theadやtbodyは必ず書く必要がありますか
省略しても表は表示されます。小さな表なら <tr> と <th>／<td> だけで十分です。
ただし行数の多い表では、<thead>／<tbody> で見出しとデータを分けると、構造が読み取りやすくなり保守もしやすくなります。
Q. thとtdの使い分けが分かりません
見出しセルが <th>、中身のデータが <td> です。<th> は標準で太字・中央揃えになり、読み上げ環境では「見出し」として扱われます。
「これは項目名か、データか」で判断すると迷いません。
Q. セルを結合したら表がずれてしまいます
colspan／rowspan で結合した分、ほかの行や列のセル数を減らす必要があります。結合した数だけセルを「詰める」のが原則です。
最初は各行のセル数を紙に書き出して、合計が揃っているか確認すると崩れにくくなります。
Q. スマホで表がはみ出します
表を <div> で囲み、そのボックスに overflow-x: auto を指定してください。テーブル側に min-width を設定しておくと、狭い画面では横スクロールに切り替わります。
レイアウト全体を崩さずにスマホ対応できる、実用的な方法です。
Q. レイアウト目的でテーブルを使ってはいけないのですか
避けてください。レイアウト目的のテーブルはHTML4時代の手法で、現在はアクセシビリティ・保守性の両面で問題があります。
段組みや配置はCSSのFlexboxやGridで行うのが現代の原則です。テーブルはデータ表示専用と考えましょう。
まとめ
最後に、この記事の要点を整理します。
この記事のまとめ - 基本構造は
table → tr → th/td。大きな表は thead／tbody／tfoot でグループ化 caption で表のタイトルを付けると、見た目と読み上げの両方で分かりやすくなるcolspan＝横の結合、rowspan＝縦の結合。結合した分はセル数を詰めるth に scope 属性を付けるとアクセシビリティが向上する- スマホ対応は横スクロール用のボックスで囲むのが実用的
- テーブルはデータ表示専用。レイアウト目的では使わない
テーブルはデータ表示に特化したタグです。レイアウト目的では使わず、比較表やデータ一覧に正しく活用しましょう。
次のステップとして、HTMLのリスト（ul・ol）の書き方や、文書全体の組み立てを学ぶHTMLの基本構造を徹底解説もあわせて確認しておくと、表を含むページ全体を自分で組めるようになります。
※本記事はHTML／CSSの仕様と公開情報をもとにした学習用の整理です。仕様やブラウザの挙動は変更される場合があるため、実装時は各公式ドキュメント（MDN Web Docs・W3C等）の最新情報をご確認のうえご判断ください。
この記事を書いた人
大学卒業後、Web制作会社に入社し、コーポレートサイトやECサイト、キャンペーンサイトなど幅広い案件を担当。企画・設計からデザインディレクション、進行管理、納品後の運用改善までトータルで携わる。クライアントの課題整理から戦略立案まで踏み込む提案力と、円滑なチームマネジメントに定評がある。
・Webサイト構築の企画・情報設計
・UI/UX改善提案
・制作進行管理・品質管理
・マーケティング視点での運用改善
Webサイトは“つくって終わり”ではなく、運用しながら成果を伸ばしていくものだと考えています。お客様のビジネスとユーザーの両方にとって価値のあるWebサイトを、戦略から実装まで全力でサポートいたします。
