第18章 table は悪者だったのか
いまは CSS でレイアウトするのが当たり前ですが、CSS がまだ未熟だった時代には、ページ全体の配置を table（表）で組むのが普通でした。やがてその反動で「table は悪」という強い言い方が生まれ、いまでも古い記事や先輩エンジニアの口から聞くことがあります。でも、料金表や時刻表のような表は、いまでも table で書くのが正解です。同じ要素が、ある場面では悪者で、ある場面では正解。何が違うのでしょうか。
この章では、「table は悪」という有名な言い方を、そのまま要素の善悪として受け取るのではなく、レイアウト用途での乱用と、データ表としての本来の役割に分けて整理します。ゴールは、table を見たときに「使った時点で古い」と反射するのではなく、「この用途で何を伝えようとしているか」で評価できるようになることです。
前章では、h1 を巡る標語が、仕様と助言と実務を混ぜて広まりやすいと見ました。この章でも同じく、強い標語の背後にある文脈差を扱います。次章では、div がなぜ悪者にされやすいのかを見ます。
18.1 批判されたのは table そのものよりレイアウト用途だった
table が嫌われた背景には、ページ全体を表の入れ子で組む時代がありました。ヘッダー、サイドバー、本文、余白まで、全部を table と tr と td で配置する。そうした書き方は、たしかに長く、読みづらく、保守しにくいものでした。
ただし、そうした書き方が広まったのは、単に書き手が意味を軽視していたからではありません。当時はページを安定して並べる手段が限られ、複数のブラウザで似た見た目を確保する必要も強かった。table は、その条件の中では実用的な選択肢でもありました。この時代を象徴するのが、spacer.gif と呼ばれた 1×1 ピクセルの透明画像です。表のセルにこれを置いて幅や高さを指定し、余白を作る——いまから見れば驚くような手法が、レイアウトを安定させるために広く使われていました。
このとき批判されていたのは、「表という要素が存在すること」ではありません。データの行列関係を持たないものまで、レイアウト都合で表へ押し込んでいたことです。CSS レイアウトが普及してくると、その不自然さが一気に見えるようになり、「table は悪」という反動の強い言い方が広まりました。
つまり最初に切り分けたいのは、悪かったのが要素そのものではなく、用途とのずれだったという点です。
18.2 データ表にとっては table がいまも自然である
一方で、行と列の関係を持つ情報には、いまでも table が最も自然です。売上一覧、料金表、比較表、時刻表のように、見出しと値の対応が二次元に並ぶ情報では、表として読むこと自体が内容の一部だからです。
<table>
<tr><th>商品</th><th>価格</th></tr>
<tr><td>ノート</td><td>500円</td></tr>
</table>
この種の情報を div だけで組み直して見た目を似せても、文書が伝える意味は同じにはなりません。表としての関係が薄れ、支援技術や機械処理にとっても読み取りにくくなります。つまりデータ表の文脈では、table は古い要素ではなく、意味をはっきり渡せる要素です。
たとえば、どの見出しがどの値に対応するのか、行と列の交点が何を意味するのか、といった情報は、見た目だけではなく構造として渡る必要があります。そこを div の並びへ崩すと、人間には何となく表に見えても、読む側にとっての関係が弱くなります。
ここで見えてくるのは、第5章で見た tbody の話ともつながります。table は単なる箱ではなく、表モデルという内部構造を持った要素です。だからレイアウトの汎用コンテナとして乱用すると無理が出る一方、表として使うと強い意味が出ます。
18.3 「禁止」ではなく、何を表すかで判断する
table 論争が長引くのは、「レイアウト用途での乱用」と「データ表としての正当な利用」が、短い標語の中でまとめて潰されやすいからです。table を禁止すると言ったほうが教えやすい。しかしそれでは、本来の役割まで巻き添えにします。
ここで必要なのは、要素を見る視点を「新しいか古いか」から「何を表すか」へ戻すことです。レイアウトのために行列関係のないものを表へ押し込むなら不自然です。逆に、行と列の関係が内容の核心にあるなら、table を避けるほうが不自然になります。
この判断は、HTML の他の話題とも同じです。h1 の個数だけでは決められないように、table も要素名だけで善悪を決められません。文脈を落とした標語は、部分的な真実を乱暴に広げただけのものになりやすいのです。
18.4 実務では「表らしさ」を先に問う
実務で迷ったときに先に問うべきなのは、「これは見た目が表っぽいか」ではなく、「利用者にとって表として読むべき情報か」です。列見出しと行見出しの関係があり、その交点に値が入るなら、table は有力です。逆に、ページの骨組みを並べたいだけなら、table ではなく別のレイアウト手段を選ぶべきです。
ここで押さえたいのは、「table を使ってよいか悪いか」という単純な答えではありません。批判された文脈と、いまでも正しい文脈を分けて考える視点です。そうすれば、「table は悪」という標語が、どこまで本当で、どこから雑になるのかを説明できます。次章では、同じように悪者扱いされやすい div を見直します。