テーブルタグとは 書き方と見出しセルの付け方 表を読み違えさせない手順

自社サイトに、料金や仕様をまとめた表を載せている。見た目はきれいに揃っているので、問題があるとは思っていない。

それでも、制作会社から「表のタグが少し古い書き方です」と言われた。あるいは、AI検索の記事を読んでいて「表のHTMLが大事らしい」と見かけた。自社の表は、いったい何を直せばよいのか。この記事は、そう感じている経営者やWeb担当者に向けて書いています。

結論から言います。テーブルタグとは、行と列で整理した情報（表）をHTMLで書くための、table要素とその部品のことです。表を正しく読ませるために直す場所は、見出しセルの付け方に集まっています。見た目の装飾は、その後です。

HTMLの仕様（WHATWG）は、table要素を「2次元以上の広がりを持つデータを、表の形で表すもの」と説明しています（弊社訳）。見出しにあたるセルは th、中身のセルは td で書き分けます。

この書き分けを忘れた表は、画面では同じに見えても、音声で読む人や、表の中身を取り出して使う仕組みには、ただの文字の並びとして届きます。

この記事は、テーブルタグの書き方を、次の5つの約束に整理しました。上から順に確かめると、自社の表の直す場所が決まります。

先に答え：表は5つの約束で組み立てる

5つの約束を、表にまとめます。

順番	約束	公式文書に書かれていること	確かめ方
1	値が縦横に並ぶ情報だけを表にする	table要素は、2次元以上のデータを表す。レイアウトに使ってはならない	表を外すと、ただの飾りにならないか
2	見出しのセルは th で書く	見出しセルは th、データのセルは td	見出しのセルが、td に太字を付けただけになっていないか
3	見出しの向きが紛らわしければ scope を付ける	scope は、見出しが行に効くのか列に効くのかを示す	上の行と左の列に、見出しが両方ないか
4	表の題は caption か、囲む figure の図の説明に書く	題があると、表の中身を理解しやすくなる	表の直前に、何の表かが書いてあるか
5	見た目は CSS で整える	border や cellpadding などの属性は、現在の仕様では古い書き方	表のタグに width や bgcolor が残っていないか

この5つに、数字で出す合否はありません。公式文書にも、列の数や行の数の上限の目安は書かれていません。書かれているのは、セルをどう結合してよいかといった書き方の決まりです。

この記事の読み方

悩みの種類によって、読む節が変わります。

いまの悩み	読む節
テーブルタグが何のことか分からない	テーブルタグとは
基本の書き方を確かめたい	基本の組み立て
見出しセルや scope の意味が知りたい	見出しセルを決める
セルを結合したい	セルの結合
古い書き方を直したい	古い属性は使わない
スマホで表が崩れる	スマホで崩れる表
WordPressで作りたい	WordPressの表ブロック
検索やAIでの扱いを知りたい	検索エンジンとAIは表をどう読むか

この記事で確かめた資料

この記事は、次の資料を2026年11月6日に実際に開いて読んでから書いています。

• HTMLの仕様（WHATWG）「4.9 Tabular data」「Obsolete features」「Parsing HTML documents」
• W3Cウェブアクセシビリティ・イニシアチブ「Tables Tutorial」（2023年2月16日更新）と、その中の「Caption & Summary」
• WordPress公式ドキュメント「Table block」（2026年5月25日更新）
• Google検索セントラル「AI機能とウェブサイト」（日本語版・2025年12月31日更新）
• Google検索セントラル「SEO スターター ガイド」（日本語版・2025年12月18日更新）
• Google検索セントラル「強調スニペット」（日本語版・2025年12月18日更新）
• OpenAIのクローラーの文書、Anthropicのクロールに関するヘルプ

書くのは、そこで確かめられた範囲だけです。確かめられなかったことは「公式に記載なし」と書きます。弊社の考えを足すときは、「弊社の整理」と見出しに入れて、確かめた事実と分けます。

Q&Aサイトで見かけた「テーブルタグは使わないほうがいいのか」という声

先日、Q&Aサイトでこのような悩みを拝見しました。2008年に投稿された質問ですが、いまも同じ疑問を持つ人は多いと思います。

投稿者は、ホームページを自分で作っていました。これまでは、ページの配置をテーブルタグで組んでいたそうです。リニューアルしようと調べてみると、いまは配置にCSSを使うと書いてあります。

少し勉強して、大まかな配置はCSSで作ってみた。難しかった。ここで困ったのが、たくさんの画像と説明文を並べたいページでした。表で作ればすぐなのに、これもCSSで作らなければいけないのか。テーブルタグは、一切使わないほうがよいのか。投稿者は、そう尋ねていました。

回答は複数ありました。多くが同じ方向でした。表として見せたい情報なら、迷わず使ってよい。ページの骨格にあたる配置は、CSSで組む。この線引きを示す回答が目立ちました。

この質問から読み取れる2つの迷い

質問の背景には、迷いが2つあります。

1つ目は、「テーブルタグは古い」という空気だけが伝わって、何が古いのか分からないこと。2つ目は、表の形をした情報なのか、配置のための枠なのかを、自分で見分ける基準を持っていないことです。

どちらも、テーブルタグそのものが悪いのではありません。使う目的が混ざっているために、迷いが生まれています。

質問者の迷いに、先に短く答える

答えは、HTMLの仕様に書かれています。仕様は、table要素をレイアウトの道具として使ってはならないと定めています（弊社訳）。

その一方で、行と列に値が並ぶ情報を表すための要素としては、現在も正式なものです。「一切使わない」は誤りで、「配置に使わない」が正しい線引きです。

質問者のアルバムのようなページは、画像と説明文が、縦横に並んでいるだけです。行と列の関係を読み取る意味はないので、仕様の言葉では、表にしない側に入ります。この場合は、CSSの配置で作ります。

テーブルタグとは：table要素が表すもの

テーブルタグとは、HTMLで表を書くための要素の総称です。中心になるのが table 要素で、その中に行（tr）、見出しセル（th）、データのセル（td）を入れていきます。

「タグ」という言い方は、tableのように名前を山括弧で囲んだ、開始と終了の記号を指します。仕様の用語では「要素」と呼びますが、この記事では、タグと要素を同じものとして書きます。

仕様が書いている、table要素の役割

HTMLの仕様は、table要素について次のように書いています（弊社訳）。

「table要素は、2次元以上の広がりを持つデータを、表の形で表すものである。」

続けて、行と列が格子を作り、セルがその格子を重なりなく埋めなければならない、とも書いています。つまり、セルの数が行ごとにばらばらな表や、セル同士が重なる表は、仕様に合っていません。

見た目が揃っていても、HTMLの組み方が仕様に合っていない表は、作る人が思うよりも多く見かけます。

配置に使ってはならない理由

仕様は、配置にテーブルタグを使うことを禁じる理由も、書いています（弊社訳）。

「表を抜き出そうとする仕組みが、とても分かりにくい結果を得るから」

画面の読み上げソフトを使う人にとっては、配置用の表の中を行き来するのが、とても難しくなる、とも書いています。配置には、CSSのグリッド、フレックスボックスなどを使うよう、仕様は挙げています。

見分け方：外したら意味が変わるか

自社の表が、表であるべきか、配置のための枠なのかは、1つの問いで見分けられます。その表を外して、同じ内容を文章や見出しで書き直したとき、読む人が失うものがあるか。

行と列の組み合わせで意味が決まる情報なら、表のままにします。たとえば、プランごとの機能の有無や、日付ごとの予定は、行と列を読み合わせないと意味が決まりません。

画像と説明文を横に並べただけなら、並びが変わっても意味は変わりません。この場合は、表にしません。

質問者のアルバムのページは、どう作るか

質問者が作りたかった、画像と説明文が並ぶページに戻ります。

画像1枚と説明文1つを1組のかたまりにして、そのかたまりを横に並べます。並べ方はCSSで指定します。画面が狭くなったときは、かたまりが自動で下の段へ折り返す書き方にできます。

表は列の数を行ごとにそろえて組むため、画面の幅に合わせて折り返す動きを付けにくくなります。これは弊社の整理です。同じ見た目を目指すなら、CSSの配置のほうが、後から直しやすくなります。

ただし、写真ごとに撮影日・場所・枚数のような項目を揃えて見せたい場合は、行と列に意味があります。その部分だけは、表で書いてかまいません。

1つのページの中で、表にする部分とCSSで並べる部分は、混ぜて使えます。ページ全体を1つの方法に統一する必要はありません。

基本の組み立て：table・tr・th・td

表の書き方は、入れ子の形で覚えると速く身に付きます。いちばん外が table、その中に行を表す tr、さらにその中にセルを表す th と td が入ります。

最小の形

3つのプランの月額と機能を比べる、小さな表で書いてみます。金額は書かず、機能の有無だけを並べます。

<table>
  <thead>
    <tr><th>プラン</th><th>相談</th><th>報告書</th></tr>
  </thead>
  <tbody>
    <tr><th>基本</th><td>あり</td><td>なし</td></tr>
    <tr><th>標準</th><td>あり</td><td>あり</td></tr>
  </tbody>
</table>

1行目の tr が、見出しの行です。上の行のセルは、すべて th で書きます。

2行目以降は、左端のセルを th にしています。プラン名が行の見出しで、その右のセルが、そのプランの中身だからです。上と左の両方に見出しがあるので、この表は「見出しが2方向ある表」です。scope の話は、次の節で扱います。

行と列の数え方

HTMLの表は、行（tr）を並べて作ります。列を直接書く場所はありません。各行の中のセルを左から数えたとき、同じ位置にくるセルの集まりが、1つの列です。

仕様は、行と列が格子を作り、セルがその格子を重なりなく埋めなければならない、と書いています（弊社訳）。行ごとにセルの数が違うと、列が揃わず、仕様に合わない表になります。

セルの数が足りないときは、空のセルを置くか、次の節で扱う結合を使います。

th と td の使い分け

2つの違いは、セルが「見出し」か「中身」かの一点です。

タグ	意味	見た目の既定	中に書くもの
th	見出しのセル（header cell）	太字で中央に寄ることが多い	列や行の名前
td	中身のセル（data cell）	通常の文字	値や説明

見た目の既定は、ブラウザによって違います。見た目が似ているから、という理由で th と td を入れ替えてはいけません。意味の違いを、読み上げの仕組みが使うからです。

tbody を書かなくても補われる

先ほどの例には、thead と tbody を書きました。仕様では、これらの書き方は任意で、tr を直接 table の中に書くことも許されています。

HTMLの構文解析の仕様には、table の中に tr、td、th の開始タグが出てきたとき、tbody の開始タグを補って処理する、と書かれています。つまり、tbody を書かなくても、ブラウザの内部では tbody が補われた形になります。

この性質は、CSSを書くときに効いてきます。「table の直下の tr」を指定したつもりでも、ブラウザの中では tbody の下にあるためです。制作会社にCSSの修正を頼むときは、この点を伝えると話が速くなります。

見出しセルを決める：th と scope

表を作るとき、いちばん重要な作業は見出しセルを決めることです。ここを間違えると、あとの装飾をどれだけ丁寧に作っても、表は読み違えられます。

W3Cが書く、見出しセルを th で書く理由

W3Cのウェブアクセシビリティ・イニシアチブは、表のチュートリアルで次のように書いています（弊社訳）。

「アクセシブルな表には、見出しセルとデータセルを示し、その関係を定めるHTMLの記述が必要である。支援技術は、この情報を使って、利用者に文脈を伝える。」

さらに、見出しセルは th で、データセルは td で書かなければならない、とも書いています。

この文書は、見出しの記述がない表について、画面の見た目だけに頼ることは十分でない、とも書いています。画面上で、太字や背景色で見出しらしく見せても、それは目で見る人にしか伝わりません。

なぜ、読み上げの人に差が出るのか

W3Cの文書は、見出しの記述がある表で起きることを、次のように説明しています（弊社訳）。

「画面の読み上げを使う人は、表の中を移動するとき、行と列の見出しを音声で聞ける。読み上げは1つのセルずつ話し、関係する見出しも一緒に伝えるので、利用者は文脈を見失わない。」

数字だけが並ぶ表で、このことは大きな差になります。「12,000」というセルを聞いたときに、それが何の数字かは、見出しが一緒に読まれて初めて分かります。

見出しが上の行だけのとき

W3Cのチュートリアルは、見出しが1方向にしかない小さな表なら、th と td を使い分けるだけでよいと書いています。たとえば、日付・催し・会場の3列の一覧で、最初の行だけが見出しのような表です。

ただし、これは「表が小さく、列ごとにデータの種類がはっきり違う」場合に限った書き方だと、文書自身が断っています。

見出しの向きが読み取りにくい表では、一部の読み上げソフトが、見出しを余計に読み上げることがある、とも書かれています。向きを示す方法が、次の scope です。

scope で向きを示す

scope は、th に付ける属性です。その見出しが、行に効くのか、列に効くのかを示します。

W3Cのチュートリアルは、上と左の両方に見出しがある表や、見出しの向きが分かりにくい表では、scope に col または row を指定する、と書いています。

<table>
  <caption>プランごとの対応</caption>
  <tr>
    <td></td>
    <th scope="col">相談</th>
    <th scope="col">報告書</th>
  </tr>
  <tr>
    <th scope="row">基本</th>
    <td>あり</td>
    <td>なし</td>
  </tr>
</table>

左上の角のセルは、見出しではない空のセルとして、td で置きます。上の見出しには scope=”col”、左の見出しには scope=”row” を付けています。

scope の4つの値

HTMLの仕様は、scope に取れる値を、次のように定めています。

値	効く範囲	使う場面
col	同じ列の、あとに続くセル	上の見出し
row	同じ行の、あとに続くセル	左の見出し
colgroup	列のグループ全体の、あとに続くセル	列をまとめる見出し
rowgroup	行のグループ全体の、あとに続くセル	行をまとめる見出し

値が省略されたり、不正だったりすると、自動の判断になります。仕様は、この状態を「文脈から、効く範囲を選ぶ」と説明しています。

colgroup と rowgroup は、見出しが複数のセルにまたがるような、やや複雑な表で使います。中小企業の料金表や比較表では、col と row を覚えておけば足ります。

太字の td は見出しではない

見た目だけを太字にした td は、見出しとして機能しません。HTMLの仕様の「古い機能」の一覧にも、td に scope を付ける書き方は、見出しには th を使うよう書き換える対象として載っています。

制作会社が作った表で、見出しの行が td に太字を付けて書かれていることがあります。画面では見分けがつきません。ページのソースを開いて、見出しのセルが th になっているかを確かめます。

表の題と区分け：caption・thead・tbody・tfoot

見出しセルが決まったら、表全体の題と、表の中の区分けを決めます。ここは任意の部品が多いので、必要なものだけを足します。

caption は表の題

仕様は、caption を「親の table の題」と説明しています（弊社訳）。

W3Cの文書は、caption を「表の見出しのように働くもの」と書いています。多くの画面読み上げソフトは、caption の内容を読み上げます。利用者は、その表を読むかどうかを、題を聞いて決められます。

表の中を移動する専用のモードを使う利用者にとっては、caption が、表を見つける主な手がかりになる、とも書かれています。

figure で囲むなら、図の説明に書く

仕様には、1つの注意が書かれています。table が figure の中の唯一の内容で、ほかに figcaption しかないときは、caption を省いて、figcaption を使うほうがよい、という内容です（弊社訳）。

WordPressの表ブロックは、表を figure で囲んで出力します。このため、WordPressで題を付けるときは、表の下に出る「キャプション」の欄に書きます。この欄は、figcaption になります。

thead・tbody・tfoot の役割

3つの区分けの役割は、仕様に書かれています。

要素	仕様の説明	使う場面
thead	列の見出しの行のまとまり	上の見出し行
tbody	表の本体の行のまとまり	中身の行
tfoot	列の集計（フッター）の行のまとまり	合計の行

thead の中は、th だけとは限りません。仕様の例には、見出しの行の下に「何を入れる欄か」を説明する td の行が入っています。

tfoot は、合計の行を置く場所です。仕様の文書の構成では、tfoot は表の本体のあとに置く決まりです。

表の前に、説明の文章を置く

複雑な表には、caption だけでは足りません。仕様は、見出しが最初の行と最初の列だけの単純な格子を超える表や、読む人が理解に迷いそうな表には、導入の文章を付けるべきだと書いています（弊社訳）。

その文章には、表の目的、セルの基本的な構造、傾向や特徴を書きます。画面が見えない人にとって、特に役に立つ、とも書かれています。

たとえば、「次の表は、左の列に項目、右の2列に現状と目標を並べています」のような一文です。この1文は、AIが表を読むときの手がかりにもなる可能性があります。これは弊社の仮説です。

セルの結合：colspan と rowspan

2つ以上のセルを1つにまとめたいときは、結合の属性を使います。横にまとめるのが colspan、縦にまとめるのが rowspan です。

横に結合する colspan

colspan は、そのセルが横に何列ぶんの幅を占めるかを、数字で指定します。「colspan=2」と書くと、そのセルは2列ぶんを占めます。

たとえば、「対応範囲」という見出しの下に、「相談」と「報告書」の2列がぶら下がる表です。上の見出しは2列ぶんを占めるので、colspan の2を使います。

結合したぶん、その行のほかのセルは、数が減ります。行ごとの占める列の合計は、同じにしなければなりません。

縦に結合する rowspan

rowspan は、そのセルが縦に何行ぶんを占めるかを指定します。「同じ分類の項目が3行続く表で、分類名を1つにまとめる」ときなどに使います。

結合したセルの下の行では、その列のセルを書きません。書くと、セルが重なって、表が壊れます。

仕様が決めている上限と禁止

結合の書き方には、HTMLの仕様が決めた範囲があります。

項目	仕様の内容
colspan の値	0より大きく、1000以下の整数
rowspan の値	0以上、65534以下の整数
rowspan に 0 を指定	そのセルが、行のグループの最後までの行を占める
セルの重なり	結合を使って、セル同士を重ねてはならない

実務で1000列や65534行の表を作ることはありません。ただし、「セルを重ねてはならない」は、意外に破られています。結合のあと、下の行のセルを消し忘れると、重なりが生まれます。

重なった表は、ブラウザごとに表示が変わります。画面では直ったように見えても、読み上げの順番が崩れていることがあります。

結合しないほうがよい場面

結合は、見た目を整えるために便利です。一方で、読み上げの仕組みにとっては、見出しとセルの対応が複雑になります。

W3Cのチュートリアルは、見出しが複数の列や行にまたがる、見出しが不規則な表について、列と行のグループを定義し、scope の colgroup と rowgroup を使う方法を示しています。さらに複雑な表では、id と headers の属性で、見出しとセルを1つずつ結びつけます。

結合を使うほど、書く人の手間が増えます。結合を使わず、1つの表を2つの表に分けられないか。まずそれを考えます。

中小企業のサイトの表は、行と列が揃った単純な形のほうが、直しやすく、読み間違いも起こりにくくなります。

古い属性は使わない：見た目はCSSで整える

古い制作会社が作った表には、border、cellpadding、bgcolor などの属性が付いていることがあります。現在の仕様では、これらは使わない書き方です。

仕様の「古い機能」の一覧

HTMLの仕様には、現在は使わないよう定められた機能の一覧があります。その中の、表に関する属性は次のとおりです。

付ける場所	古い属性
table	align・bgcolor・border・bordercolor・cellpadding・cellspacing・frame・height・rules・width
thead・tbody・tfoot	align・char・charoff・height・valign
tr	align・bgcolor・char・charoff・height・valign
td・th	align・bgcolor・char・charoff・height・nowrap・valign・width

仕様は、これらの多くについて、同じ一行で「CSSを使うこと」と書いています。見た目は、CSSで指定する決まりです。

summary 属性も古い

table の summary 属性も、古い機能の一覧に載っています。仕様は、代わりに「表の説明の方法（前の節で書いた、文章での導入や caption）」を使うよう書いています。

summary 属性は、配置用の表にもそうでない表にも、昔から付けられてきました。このため、仕様は、表の種類を見分ける手がかりには数えていません（弊社訳）。

古い書き方を見つけて直す

自社の表が、古い書き方になっているかは、ページのソースで確かめられます。

ブラウザでページを開き、右クリックから「ページのソースを表示」を選びます。検索の欄に「cellpadding」「bgcolor」「border=」と入れて、ヒットするかを見ます。

ヒットしたら、制作会社やWordPressのテーマの作者に、CSSでの書き直しを頼みます。表の見た目が変わらないように、直したあとの比較を一緒に頼みます。

古い属性が残っていても、表示が壊れるとは限りません。ブラウザが、古い書き方を解釈して表示してくれるためです。だから、見た目だけでは気づけません。

配置用の表と見なされないための手がかり

仕様は、ブラウザが「配置用の表」と判断するときの手がかりを、書いています。逆に、「配置用ではない表」と判断される手がかりも、一緒に書かれています。

手がかり	仕様の判断
role 属性に presentation を指定している	たぶん、配置用の表
border が 0、または cellspacing と cellpadding が 0	たぶん、配置用の表
caption、thead、th が使われている	たぶん、配置用ではない表
headers や scope が使われている	たぶん、配置用ではない表
border が 0 以外、またはCSSで枠線を見える形に指定している	たぶん、配置用ではない表
summary 属性が付いている	手がかりにならない

仕様は、この手がかりが間違っている可能性も、はっきり書いています。ブラウザを作る人向けの文章です。書く側から見ると、th と caption を付けておけば、表として読まれやすい、という読み方ができます。

スマホで崩れる表：直す順番

表がスマホで崩れる、という悩みは、とても多く聞きます。ただし、公式の文書に、スマホ向けの表の書き方を細かく定めたものは、確かめた範囲では見つかりませんでした。

この節は、弊社の整理です。直すときの順番の提案として読んでください。確かめた事実は含みません。

崩れ方は3種類

スマホで崩れる表は、見た目の崩れ方で、原因が分かれます。

崩れ方	起きていること	直す方向
表が画面から横にはみ出す	列が多く、幅が足りない	列を減らす。または横にスクロールさせる
セルの中の文字が1文字ずつ縦に折れる	1つの列の幅が極端に狭い	列を減らす。文字を短くする
表の一部だけが画面に収まる	幅を固定した値で指定している	固定の幅をやめる

直す順番

直す順番は、手間の小さい順に決めます。

1つ目は、列を減らせないかを考えることです。表の列は、スマホの画面では3列から4列ほどが、読みやすい上限だと感じています。これは弊社の感覚で、公式の数字ではありません。

2つ目は、固定の幅を外すことです。古い width 属性が残っていないかを確かめます。

3つ目は、表を横にスクロールできる枠で包むことです。

.table-scroll { overflow-x: auto; }

この1行を、表を包む要素に指定します。表が画面より広いとき、その枠の中だけが横に動きます。

横スクロールの注意

横にスクロールさせた場合、右にまだ列があることに、気づかない人がいます。右端が少し見えるようにするか、表の前に「横に動かせます」と一言書きます。

表を横に動かせても、見出しの列が左に固定されないと、どの値が何の数字か、分からなくなります。この場合は、列を減らす直し方を、先に検討します。

見出しの th は、スマホでも外さない

スマホで見やすくしたいからと、見出しのセルを消して、各セルに「価格：」「機能：」のような文字を書き込む作りを、見かけることがあります。

見た目は分かりやすくなりますが、見出しの th がなくなるので、読み上げと表の構造の読み取りには、不利になります。見た目を変えるときも、th と td の構造は、そのまま残します。

構造を残したまま、見た目だけ変える

スマホ用に見た目を変えたいときも、直すのはCSSだけにして、HTMLの構造は触りません。

th が th のまま、td が td のままであれば、画面の見え方を変えても、読み上げや表の読み取りには影響が出にくくなります。逆に、構造を壊して見た目を整えると、画面で直った分、別のところで読み違えが起きやすくなります。

制作会社に直しを頼むときは、「見た目は変えてよいが、th・td・caption の構造は残してください」と伝えます。この一言で、後から構造が失われる事故を防げます。

直したあとの確かめ方

直したあとは、実際のスマホで確かめます。パソコンのブラウザで画面を細くしても、近い見え方になりますが、最後は実機で見るのが確実です。

確かめる点は3つあります。表が画面からはみ出していないか。見出しと値の対応が、見て分かるか。文字が小さすぎず、指で読めるか。

WordPressの表ブロックで作る

WordPressの編集画面（ブロックエディター）には、表を作る専用のブロックがあります。HTMLを書かなくても、見出しのある表を作れます。

ここは、WordPress公式ドキュメント「Table block」（2026年5月25日更新）で確かめた範囲を書きます。画面の名前や位置は、お使いのバージョンやテーマで違うことがあります。

表ブロックの入れ方

ブロックを追加するボタンから「表」を選びます。キーボードで「/table」と入力しても、同じブロックを入れられます。

公式ドキュメントには、「表は、表にまとめたデータのために使うのがよく、ページのデザインには向かない」という趣旨の注意書きがあります。列を並べたいだけなら、「カラム」ブロックを使うよう案内されています。

先に見た、HTMLの仕様の考え方と同じ線引きです。

行と列を足す

ブロックを選ぶと、上にツールバーが出ます。ツールバーの、表を編集するボタンから、行や列を前後に挿入したり、削除したりできます。

セルの結合は、このドキュメントには記載がありませんでした。結合が必要な表は、コードエディターでHTMLを直接書く必要が出てきます。これは弊社の整理です。

見出しセクションをオンにする

設定パネルには、Header section と Footer section という切り替えがあります。ドキュメントは、それぞれ表にヘッダー部分、フッター部分を追加する、と説明しています。

Header section をオンにすると、表に見出しの部分が加わります。仕様の言葉でいえば thead にあたると考えられますが、th や thead になるという直接の記述は、ドキュメントに見つかりませんでした。

表を作ったら、この切り替えが入っているかを、真っ先に確かめます。実際に出力されるHTMLは、ページのソースで確かめます。

キャプションを付ける

ツールバーに、キャプションを付けたり外したりするボタンがあります。キャプションには、太字、斜体、リンクも使えます。

先に書いたとおり、HTMLの仕様は、表が figure の中の唯一の内容なら、caption を省いて figcaption を使うよう書いています。表ブロックのキャプションの欄は、この figcaption にあたるはずです。ただし、公式ドキュメントに、出力される要素名の記載は見つかりませんでした。

固定幅のセル

設定の中に、Fixed width table cells という切り替えがあります。オンにすると、列の幅が中身に合わせて変わらず、すべて同じ幅になります。ドキュメントによると、バージョン6.6から、この設定は最初からオンになっています。

列の数が多いと、同じ幅の列が並ぶので、1列あたりの幅が狭くなります。スマホで文字が縦に折れる場合は、この設定が関係していないかも確かめます。

出力されたHTMLを確かめる

編集画面で整って見えても、出力されたHTMLが想定どおりとは限りません。公開したページを開き、ページのソースで、次の3点を探します。

確かめる点	探す言葉	合格の目安
見出しのセルが th か	th	上の見出しが th になっている
見出しが thead の中か	thead	見出しの行が thead に入っている
古い属性が無いか	cellpadding、bgcolor、border=	ヒットしない

検索エンジンとAIは表をどう読むか

自社の表を直しても、検索やAIの回答に反映されるのか。いちばん気になる点です。

結論から書くと、確かめた公式文書の中には、表のHTMLの書き方と検索結果への影響を結びつけた記述は、見つかりませんでした。公式に記載なし、です。

Googleの文書：表についての記述は見つからなかった

次の3つのGoogle検索セントラルの文書を、2026年11月6日に開いて、表に関する記述を探しました。

文書（日本語版）	更新日	表についての記述
AI機能とウェブサイト	2025年12月31日	公式に記載なし
SEO スターター ガイド	2025年12月18日	公式に記載なし
強調スニペット	2025年12月18日	公式に記載なし

「AI機能とウェブサイト」は、AIによる概要やAIモードについて、次のように書いています。

「AI による概要や AI モードにコンテンツが表示されるための追加の要件はなく、別途特別な最適化を行う必要もありません。」

同じ文書のベスト プラクティスの箇条書きには、次の1行があります。

「重要なコンテンツはテキスト形式で提示します。」

表を画像にすると、この条件から外れる

この1行から、実務で確かめられることが1つあります。表をスクリーンショットや画像のかたちで貼ると、表の中身は、テキストの形から外れます。

HTMLの表（table要素）であれば、セルの中身は文字です。画像の表は、見た目が同じでも、文字として読み取れる保証がありません。

料金表や比較表を、デザインの都合で画像にしているサイトを見かけます。見た目を保ちたい場合でも、表そのものはHTMLで書き、画像は別の補助にします。画像やPDFにある情報をAI検索に伝える方法は、既存の記事にまとめています（後の節で送ります）。

OpenAIとAnthropicの文書

OpenAIのクローラーの概要と、Anthropicのクロールに関するヘルプも、2026年11月6日に開きました。

どちらも、クローラーの名前と、robots.txtでの扱いなどを説明する文書です。表のHTMLについての記述は、どちらにも見つかりませんでした。公式に記載なし、です。

弊社の整理：表が単独で取り出されたときに備える

ここからは、弊社の整理です。公式文書に書かれた内容は含みません。確かめた事実でもありません。仮説として読んでください。

AIが回答を作るとき、ページの一部だけが取り出される場面があると、弊社は考えています。表だけが取り出された場合、見出しセルと題があれば、「何の表か」「どの値が何か」を、表の外の文章に頼らず読み取れます。

見出しのない表は、数字や「あり」「なし」だけが並ぶので、取り出された先で意味が通じません。これは、読み上げの人にとって起きる問題と、同じ形です。

だから、th と caption を付ける作業は、画面の読み上げの人のためであると同時に、取り出されたときの意味を守る作業でもある、というのが弊社の見方です。

弊社の表5,612個を点検した結果

弊社の記事の表が、ここまで書いた約束を満たしているかを、実際に数えました。

測り方

2026年11月6日に、弊社サイトの公開記事の直近500本（2026年9月18日から11月5日までの公開分）の本文のHTMLを取得し、table要素を数えました。500本のうち、表を含む記事は495本、表の数は合計5,612個でした。

1本あたりの表の数は、表を含む記事で、中央値が10個です。

結果

点検の項目	該当した表の数	全体に占める割合
thead を持つ	5,612個	100%
th を持つ（見出しセルを th で書いている）	5,612個	100%
scope 属性を持つ	0個	0%
caption を持つ	0個	0%
表の直後に figcaption を持つ	0個	0%
colspan または rowspan を持つ	2個	0.04%
table タグに border・cellpadding・cellspacing・width のいずれかを持つ	0個	0%

読み取れること：上の見出しは th、左の列は td

弊社の表は、すべて thead と th を持っていました。5,612個のすべてで、th は thead の中だけにありました。左端の列に th を使った表は、1個もありません。

古い属性は、どの表にもありませんでした。この点は、約束の5つ目を満たしています。

一方で、scope は0個、caption も0個、figcaption も0個でした。弊社の表は、題を付けず、見出しの向きも示さずに書かれていました。

これが、弊社の直す場所です。上の見出しが th で書けていても、左の列が行の見出しなのに td のままの表は、W3Cのチュートリアルが、scope を付けるよう書いている型にあたります。

表の大きさ

表の大きさも数えました。

区分	表の数
2列の表	1,601個
3列の表	3,215個
4列の表	647個
5列以上の表	146個（うち7列以上は27個）
20行以上の表	13個

行の数の中央値は、見出しの行を含めて6行でした。列の数の中央値は3列です。5,612個のうち、2列から4列の表が、5,463個を占めていました。

大きな表は、数が少なくても直す場所が多くなります。スマホでの崩れや、読み上げでの迷いは、5列以上や20行以上の表から先に出ます。直す順番は、列の多い表からにしました。

この数字の限界

この数字は、弊社の記事の書き方に偏っています。弊社の記事は、比較や点検の表を多く使います。御社のサイトの表がそのまま同じ形だとは限りません。

また、これは、HTMLの構造を数えただけです。表の中身が正しいか、読みやすいかは、数えていません。数字は、点検の出発点として使ってください。

個別の話は、既存の記事へ送る：表のHTMLからの行き先

この記事の軸は、表のHTMLの組み方です。表の中身の設計や、周りの話は、別の記事に詳しく書きました。

知りたいこと	読む記事
比較表の軸の決め方、公平な書き方	AIにも人にも伝わる比較ページの作り方
料金表の表示の書き方、改定日の入れ方	AIにも人にも料金を正しく伝える料金ページの作り方
質問と答えの構造化データ	FAQPageの書き方と置く判断
画像やPDFの情報をAI検索に伝える方法	PDF・画像・動画の情報をAI検索に伝える方法
見出しタグ（h2・h3）の順番	見出しタグとは 順番と使い方のルール

この記事で繰り返さないこと

比較表で何を行に置くか、料金の書き方、FAQPageの書き方は、上の記事で扱っています。この記事は、それらの表を HTML でどう組むか、にだけ絞りました。

見出しタグ（h1〜h6）と、表の見出しセル（th）は、名前が似ていますが、役割が違います。前者はページの章立て、後者は表の中の見出しです。

よくある質問

Q. テーブルタグは、いまも使ってよいのですか

使ってかまいません。行と列に値が並ぶ情報を表すための要素として、HTMLの仕様に定められています。

使ってはならないのは、ページの配置のために使う場合です。仕様は、配置にはCSSのグリッドやフレックスボックスなどを使うよう書いています。

迷ったら、表を外して文章で書き直したとき、読む人が失うものがあるかを考えます。失うものがあれば表です。

Q. 表を作るツール（ジェネレーター）で作った表は、そのまま使えますか

そのまま使う前に、出力されたHTMLを確かめます。確かめる点は、この記事の点検の表と同じです。

見出しのセルが th になっているか。見出しの行が thead に入っているか。border や cellpadding のような古い属性が残っていないか。この3点が満たされていれば、使えます。

古い属性が残っていたら、CSSで書き直すか、別の方法で作り直します。ツールが出す形は、ツールごとに違うので、毎回、出力を見て判断します。

Q. 表の罫線や色は、どう付けますか

見た目は、CSSで指定します。HTMLの仕様では、border や bgcolor のような属性は、古い機能の一覧に載っています。

WordPressの表ブロックなら、設定パネルのスタイルで、Default と Stripes を選べます。公式ドキュメントによると、Default は背景が無地でセルに枠線があり、Stripes は行ごとに背景の色が交互になります。最終的な見た目は、テーマによって変わります。

色や枠線の太さも、ブロックの設定パネルの Color と Border の項目から変えられます。

Q. セルの結合は、使わないほうがよいですか

必要なら使ってかまいません。ただし、結合を使うほど、見出しとセルの対応が複雑になります。

まず、表を2つに分けられないかを考えます。それでも結合が必要なら、scope や、必要に応じて id と headers で、見出しとの対応を示します。

結合したあと、下の行のセルを消し忘れて、セルが重なっていないかも確かめます。

Q. 表を入れると、検索やAI検索で有利になりますか

確かめた公式文書には、表を入れると有利になる、という記述はありませんでした。公式に記載なし、です。

Googleの「AI機能とウェブサイト」は、AI機能に表示されるための追加の要件も、特別な最適化も不要だと書いています。表のHTMLを整える理由は、読む人と、画面を読み上げる人に、内容を正しく伝えるためです。

表が検索やAIの回答に取り上げられるかどうかは、確かめられていません。約束はできません。

まとめ：表の見出しセルを決めてから、見た目を整える

テーブルタグとは、行と列で整理した情報をHTMLで書くための、table要素とその部品です。使う場面は、行と列に意味がある情報だけです。配置には使いません。

直す場所は、見た目より先に、見出しセルです。見出しは th で書き、向きが分かりにくければ scope を付けます。題が必要なら caption か、囲む figure の説明に書きます。

古い属性（border・cellpadding・bgcolor など）は、HTMLの仕様で、使わない書き方と定められています。見た目は、CSSで整えます。

弊社の公開記事の直近500本では、5,612個の表のすべてが thead と th を持っていました。一方で、scope と caption を持つ表は0個でした。見出しの向きと題を示す作業が、弊社に残っています。

WordPressの表ブロックでは、見出しの部分の切り替えを入れ、キャプションの欄に題を書きます。出力は、ページのソースで確かめます。

AIの回答との関係は、確かめた公式文書の範囲では、表についての記述が見つかりませんでした。確かめられない約束はせず、読む人のために見出しを整えます。

直す順番の提案

サイトの表を全部、一度に直す必要はありません。優先する順番を、先に決めます。

1つ目は、問い合わせや申し込みの前に読まれるページの表です。料金の違いや、サービスの比較を載せたページが、これにあたります。

2つ目は、列が多い表と、行が多い表です。スマホで崩れやすく、読み上げでも迷いやすいためです。

3つ目は、古い記事の表です。古い属性が残っている可能性が高いので、ページのソースで検索して、ヒットした記事から順に直します。

制作会社に頼む場合は、「見出しを th にして、必要な表には scope と題を付けてください。見た目は変えないでください」と、1行で伝えれば足ります。

この記事の資料と、確かめられなかったこと

資料	使った内容
HTMLの仕様（WHATWG）「Tabular data」（2026年11月6日に開いた版）	table要素の役割、配置に使ってはならないこと、th と scope、caption、thead・tbody・tfoot、colspan・rowspan の範囲、配置用の表の手がかり
HTMLの仕様（WHATWG）「Obsolete features」（同）	表に関する古い属性の一覧、summary 属性
HTMLの仕様（WHATWG）「Parsing HTML documents」（同）	tr を直接書いたときに tbody が補われること
W3Cウェブアクセシビリティ・イニシアチブ「Tables Tutorial」（2023年2月16日更新）と「Caption & Summary」	見出しセルを th で書く理由、scope の使いどころ、caption と summary
WordPress公式ドキュメント「Table block」（2026年5月25日更新）	表ブロックの作り方、Header section、キャプション、固定幅のセル、スタイル
Google検索セントラル「AI機能とウェブサイト」（2025年12月31日更新）	追加の要件も特別な最適化も不要であること、重要なコンテンツをテキストで示すこと
Google検索セントラル「SEO スターター ガイド」「強調スニペット」（2025年12月18日更新）	表についての記述が見つからなかったこと
OpenAIのクローラーの文書、Anthropicのクロールに関するヘルプ（2026年11月6日に開いた版）	表についての記述が見つからなかったこと
弊社の公開記事の直近500本（2026年11月6日に実測）	表5,612個の構造
確かめられなかったもの	スマホ向けの表の書き方を定めた公式文書、WordPressの表ブロックが出力する要素名、検索やAIの回答で表がどう扱われるか

今日できる点検

次の表を、上から順に確かめてください。1項目あたり10分ほどで終わります。

点検の項目	確かめる場所	合格の目安	直すこと
表が、配置のために使われていないか	画像と文章を並べたページ	表を外すと意味が変わる情報だけが表になっている	配置はCSSに書き換える
見出しのセルが th か	料金表・比較表のページのソース	上の見出しが th で書かれている	td に太字を付けた見出しを th に直す
見出しが2方向ある表に scope があるか	上と左の両方に見出しがある表	scope に col または row が付いている	見出しの th に scope を足す
表の題があるか	表の直前と直後	caption か、キャプションの欄に題がある	何の表かを一言で書く
古い属性が残っていないか	ページのソースで検索する	border=・cellpadding・bgcolor がヒットしない	CSSで書き直してもらう
セルが重なっていないか	結合を使った表	行ごとの列の合計がそろっている	消し忘れたセルを削除する
スマホで崩れていないか	実際のスマホで開く	表が画面からはみ出さず、見出しと値の対応が分かる	列を減らす。横スクロールの枠を付ける
表が画像になっていないか	料金表・比較表	表の中身が文字で読める	HTMLの表で書き直す

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。