【2026年7月最新】HTMLのtableタグ完全ガイド｜表の作り方・セル結合・CSSスタイリング・Claude Code活用法
aikanri-admin
この記事の内容
「Webページに表を表示したい」——HTMLを学び始めて最初に出会う課題の一つです。HTMLのtableタグを使えば、行と列からなる表（テーブル）をWebページ上に作ることができます。
しかし、tableタグには多くのサブタグ（tr・td・th・thead・tbody・tfoot）があり、さらにセル結合（colspan・rowspan）やCSSスタイリング、レスポンシブ対応まで考えると、初心者には複雑に感じられます。
この記事ではHTMLのtableタグに関する全知識を網羅的に解説します。さらに2026年現在の最新視点として、Claude Codeを使ってHTMLテーブルを自動生成する方法も紹介します。
AI鬼管理山崎
この記事で分かること：
01 TABLE BASICS HTMLのtableタグとは？基本構造を理解する table・tr・tdの組み合わせがWebの表を作る最小単位
HTMLのtableタグは、行（Row）と列（Column）で構成される表（テーブル）を作るためのHTMLタグです。スプレッドシートのセルのような格子状のレイアウトをWebページ上に表示できます。
tableタグを使った最もシンプルな表の構造は次のとおりです。tableタグで表全体を囲み、trタグで行を作り、tdタグでデータセルを作ります。この3つのタグが表を作る最小単位です。
📚 用語解説
tableタグ：WebページにHTMLで表（テーブル）を作るためのタグ。tableタグで表全体を囲み、その中にtrタグ（行）・tdタグ（データセル）・thタグ（見出しセル）などを入れ子にして使う。かつてはWebのレイアウト全般をtableで作っていたが、現代ではCSS（FlexboxやGrid）がレイアウトに使われ、tableは「データの表組み」専用になっている。
HTMLのtableタグが使われる主な場面を整理します。
| 用途 | 具体例 | 使う頻度 |
|---|---|---|
| 料金比較表 | サービスのプラン・価格・機能を比較する表 | ★★★ 高 |
| スケジュール表 | 週次・月次のタスク・イベントの一覧 | ★★★ 高 |
| 商品仕様一覧 | スペック・スコア・成分などの比較 | ★★★ 高 |
| HTMLメール | Mailchimp等のメール配信でレイアウトに使用 | ★★ 中 |
| Webページレイアウト | 2000年代に多用されたが現在は非推奨 | ★ 低（非推奨） |
代表菅澤
02 TABLE TAGS ALL 8 tableを構成するHTMLタグ全8種の使い方 table/tr/td/th/thead/tbody/tfoot/captionを完全解説
HTMLのテーブルを正しく作るには、8種類のサブタグの役割を理解することが重要です。それぞれの役割を整理します。
| タグ | 役割 | 属性例 | 省略可能か？ |
|---|---|---|---|
| table | テーブル全体を囲む親タグ | border, width, style | ❌ 必須 |
| tr | テーブルの1行（Row）を定義 | style | ❌ 必須 |
| td | データセル（Table Data）を定義 | colspan, rowspan, style | ❌ 必須 |
| th | 見出しセル（Table Header）を定義。太字・中央揃えがデフォルト | scope, colspan, style | △ 見出しがある場合に使用 |
| thead | 表の見出し行グループ。CSSで固定ヘッダーに使える | style | △ 推奨（省略可） |
| tbody | 表の本体（データ部分）グループ | style | △ 推奨（省略可） |
| tfoot | 表のフッター行グループ（合計行など） | style | △ 必要な場合のみ |
| caption | テーブルのタイトル・説明文。アクセシビリティに重要 | style | △ 推奨（省略可） |
2-1. 基本の3タグ：table・tr・td
最もシンプルなテーブルはtable・tr・tdの3つで作れます。table（表全体）→ tr（行）→ td（セル）という入れ子構造が基本です。2行3列の表なら、trタグを2つ書き、各trの中にtdタグを3つ書きます。
かつてはtableタグに「border="1"」という属性をつけて罫線を表示していましたが、HTML5では非推奨です。罫線の指定はCSSの「border」プロパティを使うのが正しいアプローチです。後述のCSSスタイリングで詳しく説明します。
2-2. 見出しセル：th（Table Header）
thタグはtdタグと似ていますが、見出しのセルを作るためのタグです。デフォルトで文字が太字・中央揃えになります。表の最初の行に列見出しを入れる場合や、各行の最初にカテゴリ名を入れる場合にthを使います。アクセシビリティの観点でも、thを使うことでスクリーンリーダーが表の構造を正しく読み上げられます。
📚 用語解説
thタグ（Table Header）：HTMLのテーブルで見出しセルを作るためのタグ。tdタグと同じ位置に書くが、デフォルトで太字・中央揃えになる。「scope="col"」属性をつけると「この見出しは列の見出し」、「scope="row"」で「行の見出し」を明示できる。スクリーンリーダーや検索エンジンが表の構造を理解するために重要な情報になる。
2-3. 表のグループ化：thead・tbody・tfoot
thead・tbody・tfootは表のセクションを分けるグループタグです。省略しても表は表示されますが、適切に使うとCSS適用が楽になり、アクセシビリティも向上します。特にtbodyは自動挿入（ブラウザが自動で追加）される場合もありますが、明示的に書くことが推奨されています。
| グループタグ | 含める内容 | スタイリングでの用途 | アクセシビリティ |
|---|---|---|---|
| thead | 見出し行（th を含む tr） | ヘッダーの背景色・固定ヘッダー | 表の構造を明示 |
| tbody | データ行（td を含む tr） | 行ごとの背景色切り替え（縞模様） | 本体データを識別 |
| tfoot | 集計・合計行 | フッターの強調スタイル | 合計行を明示 |
2-4. テーブルタイトル：caption
captionタグはテーブルの直下に書き、表のタイトルや補足説明を付与します。デフォルトではテーブルの上部中央に表示されます。視覚的な見た目だけでなく、スクリーンリーダーが「この表は何の表か」を読み上げる際に重要で、Webアクセシビリティの観点でも積極的に使うことを推奨します。
表全体のコンテナ
（caption含む）
見出し行グループ
（th タグ）
データ行グループ
（td タグ）
フッター行グループ
（合計・補足）
AI鬼管理山崎
tableタグには歴史的に多くのHTML属性が存在しましたが、HTML5では以下の属性が非推奨（deprecated）になっています。古いサイトのコードを読む際に目にすることがあるため、意味は知っておくと良いです。ただし、新規で記述する場合は必ずCSSを使ってください。
| 非推奨のHTML属性 | かつての用途 | CSSでの代替 |
|---|---|---|
| border="1" | 罫線の太さを指定 | td { border: 1px solid #ddd; } |
| bordercolor="#ccc" | 罫線の色を指定 | td { border-color: #ccc; } |
| bgcolor="#f0f0f0" | 背景色を指定 | td { background-color: #f0f0f0; } |
| width="200" | 列幅をピクセル指定 | td { width: 200px; } |
| height="50" | 行高さをピクセル指定 | td { height: 50px; } |
| align="center" | テキスト配置を指定 | td { text-align: center; } |
| cellpadding="10" | セル内余白を指定 | td { padding: 10px; } |
| cellspacing="0" | セル間隔を指定 | border-collapse: collapse; |
03 CELL MERGE セル結合：colspan・rowspanの使い方 横に結合するcolspan、縦に結合するrowspanを図解で解説
テーブルでは複数のセルを結合して、より複雑なレイアウトを作ることができます。横方向（列）に結合するcolspanと縦方向（行）に結合するrowspanの2種類があります。
📚 用語解説
colspan（列の結合）：HTMLテーブルのtd/thタグの属性。colspan="2"と指定すると、そのセルが横方向に2列分のスペースを占有する（2列を1つのセルに結合）。表の見出し行で複数列をまとめたい場合などに使用。colspan="2"を使った場合、同じ行の他のtd/thは1つ少なく書く必要がある（合計列数が変わらないように）。
3-1. colspan——横方向のセル結合
colspanはtd または th タグに指定します。「colspan="2"」と書くと、そのセルが2列分の幅を占めます。結合した分だけ、同じ行のセル数が減ることに注意してください。例えば3列の表で最初のセルに colspan="2" をつけると、その行のセルは全部で2つ（colspan="2"のセル + 残り1列のセル）になります。
| よくあるcolspan活用例 | 具体的なHTML構造 |
|---|---|
| 料金表の見出し（複数プランをまとめる） | th colspan="3" で3列を1つの見出しに |
| カレンダーの土日2列を結合 | td colspan="2" で週末を1セルに |
| 売上合計行の全列をまとめる | td colspan="4" でコメントを全幅に |
3-2. rowspan——縦方向のセル結合
rowspanは縦方向（行）に複数のセルを結合します。「rowspan="3"」と書くと、そのセルが3行分の高さを占めます。rowspanを使った場合、下の行では結合した分のセルを省略する必要があります。例えば1行目のセルに rowspan="2" をつけた場合、2行目の対応する位置にはtdを書きません。
📚 用語解説
rowspan（行の結合）：HTMLテーブルのtd/thタグの属性。rowspan="3"と指定すると、そのセルが縦方向に3行分のスペースを占有する（3行を1つのセルに結合）。カテゴリ別の集計表で、左端の「カテゴリ名」セルを縦に結合する場合などによく使われる。使用した場合、下の行でその位置のセルを省略することを忘れるとレイアウトが崩れる。
colspanやrowspanを使ったとき、最もよくあるミスは「省略すべきセルを省略し忘れること」です。colspan="2"のセルが1つある行のtd数は、全列数より1つ少なくなります。rowspan="2"のセルがある場合、次の行でそのセルの位置は1つ少なくなります。Claude Codeに依頼すると、この計算を自動でやってくれるため、セル結合の複雑なテーブルはAIに生成させる方がミスが少なくなります。
代表菅澤
04 TABLE CSS STYLE CSSでテーブルをスタイリングする 境界線・背景色・ホバー効果・縞模様など実践的なCSSレシピ
HTMLのtableタグだけでは、罫線も色もないシンプルな表が表示されます。見やすい・美しい表にするためには、CSSでスタイリングを行う必要があります。
4-1. 最重要：border-collapseでダブル罫線を解消
デフォルトのHTMLテーブルでは、各セルの境界線が重なってダブルラインになります。これを解消するには table { border-collapse: collapse; } を指定します。これを最初に設定しないと、他のボーダースタイルが意図通りに見えないため、テーブルのCSSの1行目に必ず書くと覚えてください。
📚 用語解説
border-collapse：CSSのtable専用プロパティ。「collapse（崩す）」と指定すると、隣接するセルの境界線を1本に統合する。デフォルト値は「separate（分離）」でダブルラインになる。tableスタイリングの最初に「border-collapse: collapse;」を書くのがWebのベストプラクティス。
4-2. 基本的なテーブルCSSレシピ
以下は、実際のWebサイトで使える「見やすいテーブル」のCSSの書き方です。border-collapse適用後に、ヘッダーの背景色・縞模様・ホバー効果を順に追加します。
| スタイル効果 | CSS指定 | 用途 |
|---|---|---|
| 全体枠と縦横罫線 | table { border-collapse: collapse; border: 1px solid #ddd; } | 基本の枠線設定 |
| セルの内側余白 | td, th { padding: 12px 16px; border: 1px solid #ddd; } | 読みやすい余白 |
| ヘッダー行の背景 | thead tr { background: #1a1a1a; color: #fff; } | ヘッダーを強調 |
| 縞模様（Striped） | tbody tr:nth-child(even) { background: #f9f9f9; } | 奇数行に薄い背景 |
| ホバーハイライト | tbody tr:hover { background: #fff3cd; } | マウスオーバーで行を強調 |
| 列幅の統一 | table { width: 100%; table-layout: fixed; } | 列幅を均等に |
4-3. テーブルのよくあるスタイリングパターン
ビジネスサイトでよく使われる3つのスタイルパターンを紹介します。料金表・比較表・スペック表と用途によって適切なスタイルを選ぶことで、ユーザーの理解を助けます。
| スタイルパターン | 特徴 | 向いている用途 |
|---|---|---|
| ミニマル（線のみ） | 横線のみ・背景なし・シンプル | 技術仕様・リスト型の比較 |
| ストライプ（縞模様） | 偶数行に薄い背景色・視認性高い | 多行のデータ表・料金表 |
| ダーク（黒ヘッダー） | ヘッダーを黒背景にして強調 | 比較表・プランテーブル |
AI鬼管理山崎
4-4. WordPressでのテーブルCSSの適用方法
WordPressのブロックエディタには「テーブルブロック」がありますが、カスタムスタイルを適用したい場合は2つの方法があります。①「外観→カスタマイズ→追加CSS」にテーブル用のCSSを貼り付ける方法、②HTMLブロックで直接テーブルHTMLとstyleタグを書く方法、です。
05 RESPONSIVE TABLE レスポンシブテーブル：スマホ対応の方法 スマートフォンで表が崩れる問題を解決する3つのアプローチ
HTMLテーブルはデスクトップでは問題なく表示されますが、スマートフォンで見ると横幅に収まらずに崩れることがよくあります。2026年現在、Webサイトのアクセスの50〜60%以上がスマートフォンからであることを考えると、テーブルのレスポンシブ対応は必須です。
スマートフォンでテーブルが横はみ出しになったり、文字が極端に小さくなったりすると、ユーザーはページを離脱します。特に料金比較表や仕様表は、ユーザーが最も注目するページ要素の一つです。スマホでの表示を必ず確認し、レスポンシブ対応を施してください。
5-1. 方法①：横スクロール（overflow-x: auto）
最も簡単なアプローチです。テーブルを包む div に overflow-x: auto; を設定すると、テーブルが横にスクロールできるようになります。表の構造を維持したまま対応でき、実装も最小限なため、多くのサイトで採用されています。
5-2. 方法②：縦積み表示（メディアクエリで変形）
メディアクエリを使って、スマホ表示時にテーブルのtd要素を「ブロック要素（縦並び）」に変換する方法です。各セルに「data-label」属性でラベルを付けておき、CSS疑似要素でラベルを表示します。横スクロールを避けたい場合や、モバイルUXを重視する場合に適しています。
5-3. 方法③：列数を減らす（重要度の低い列を非表示）
スマートフォン表示時に、優先度の低い列をCSSで非表示にする方法です。「@media(max-width: 768px) { .optional-col { display: none; } }」のように書きます。8列の比較表を、スマホでは4列に絞るといった対応が可能です。表の情報量が多い場合に特に有効です。
| 手法 | 実装難易度 | デザインへの影響 | 向いているケース |
|---|---|---|---|
| overflow-x: auto（横スクロール） | ★（最も簡単） | 表の構造はそのまま | 列数が多い・データが密な表 |
| 縦積み変換（メディアクエリ） | ★★（中程度） | スマホで別レイアウト | シンプルな構造の表 |
| 列の非表示 | ★（簡単） | 情報が減る | 補足情報列がある場合 |
HTML + CSS
基本スタイリング
ブラウザで
表示チェック
デベロッパーツール
375px幅で確認
横はみ出し・
文字が小さいか
3手法から
適切なものを選択
代表菅澤
06 CLAUDE CODE TABLE Claude CodeでHTMLテーブルを自動生成する 複雑なセル結合・スタイリング・レスポンシブ対応をAIに依頼する
2026年現在、Claude Codeを使えばHTMLテーブルの生成・スタイリング・セル結合・レスポンシブ対応を自然言語で指示することができます。複雑な表ほど、AIに依頼することで時間と修正コストを大幅に削減できます。
6-1. Claude Codeへのテーブル作成指示例
| あなたの指示 | Claude Codeが生成するもの | 所要時間 |
|---|---|---|
| 「3プランの料金比較表を作って。スタンダード・プロ・エンタープライズで機能比較も」 | thead/tbody構成・colspanあり・CSSスタイル付きHTML | 1〜2分 |
| 「1行目の左2列を結合した表で、縦にカテゴリ別でまとめて」 | colspan+rowspan混在・複雑な結合の正確なHTML | 2〜3分 |
| 「スマホで横スクロールできるテーブルのCSS込みで」 | overflow-x:auto ラッパー付きのHTML+CSS | 1〜2分 |
| 「このExcelの表をHTMLテーブルに変換して（データ貼り付け）」 | ExcelデータをtableタグのHTML形式に変換 | 1〜2分 |
6-2. 非エンジニアがClaude Codeでテーブルを使う実例
弊社（株式会社GENAI）ではClaude Codeを使って、エンジニア経験のないメンバーが日常的にHTMLテーブルを作成しています。具体的な活用シーンを紹介します。
AI鬼管理山崎
代表菅澤
HTMLテーブルもClaude Codeで時間を短縮できます
料金比較表・サービス仕様表・スケジュール表など、ビジネスサイトに必要な表はClaude Codeで自動生成できます。「エンジニアに依頼するほどでもないが、自分では時間がかかる」というWebの作業こそ、AI活用が最も効果を発揮する場面です。
まずは無料相談で、あなたのWebサイト更新の課題と、AIで効率化できる部分をヒアリングさせてください。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. HTMLのtableタグの基本構造を教えてください。
A. HTMLのテーブルはtable（表全体）→tr（行）→td（データセル）またはth（見出しセル）の3つのタグの組み合わせが基本です。例えば2行3列の表を作るには、tableタグの中にtrタグを2つ書き、各trの中にtdタグを3つ書きます。さらにtheadとtbodyでセクション分けをし、captionでタイトルをつけると、アクセシビリティの高い表になります。
Q. HTMLテーブルのセルを結合するにはどうすればいいですか？
A. 横方向（列）の結合はcolspan属性、縦方向（行）の結合はrowspan属性を使います。例えばtd colspan="2"と書くと、そのセルが2列分の幅を占めます。結合した分だけ同じ行のセル数を減らす必要があります。複雑な結合はClaude Codeに依頼すると、計算ミスなく正確なHTMLを生成してくれます。
Q. HTMLテーブルに罫線（ボーダー）をCSSで追加するには？
A. まず「table { border-collapse: collapse; }」を指定してダブルラインを解消してから、「td, th { border: 1px solid #ddd; padding: 12px; }」でセルに罫線と余白を設定します。ヘッダー行に背景色をつけるには「thead tr { background-color: #333; color: white; }」を追加します。これが基本的なテーブルスタイリングの出発点です。
Q. HTMLのtableタグでレイアウトを作るのはNGですか？
A. はい、テーブルレイアウト（tableタグでWebページ全体のレイアウトを組む手法）は現代では非推奨です。2000年代まではよく使われていましたが、SEO・アクセシビリティ・保守性の観点から問題があります。現代のWebレイアウトはCSSのFlexboxやGridを使うのが正しいアプローチです。tableタグは「データの表組み」専用に使ってください。
Q. HTMLテーブルがスマホで崩れます。どう対処すればいいですか？
A. 最も簡単な対処法は、テーブルをdivで囲んで「div { overflow-x: auto; }」を設定することです。これだけでテーブルを横スクロールで見られるようになります。より高度な対応として、メディアクエリでスマホ時にtdをブロック要素に変換する方法や、優先度の低い列をdisplay: noneで非表示にする方法もあります。
Q. thとtdの違いを教えてください。
A. thは「Table Header（見出しセル）」、tdは「Table Data（データセル）」を意味します。見た目の違いはthがデフォルトで太字・中央揃えになる点です。機能的には、thにscope属性（col/row）を設定することで、スクリーンリーダーが「どの行・列の見出しか」を正しく読み上げられます。表の1行目（列名）や各行の1列目（行名）にthを使うのが適切な使い方です。
Q. Claude Codeを使ってHTMLテーブルを生成できますか？
A. できます。Claude Codeに「3列の料金比較表を作って。ヘッダーは黒背景、偶数行にグレー縞模様をつけて」のように指示するだけで、CSSスタイル付きのHTMLテーブルが生成されます。Excelのデータを貼り付けて「これをHTMLテーブルに変換して」という使い方も有効です。セル結合が複雑な表も、構造を説明するだけで正確に生成してくれます。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
