倉金家ホームページ

　私は昔からホームページをつくるとき、以下のことは心がけています。

　ひとつにはサイト全体のナビゲーションを常に(言い替えれば固定で)表示し、簡単に目的の記事にアクセスできるようにすること。これにはフレーム(<frameset>)を使いました。(最近のHTML5では<frameset>はなくなるようなので<iframe>に変えました。)

　そして個々のページについては、

１．	ブラウザの幅に合わせて表示し、できる限り横スクロールしなくていいようにしたい。
２．	かといって幅の広い画面では読みにくくならないよう、表示幅の制限もしておきたい。
３．	文章のブロックは左、中央、右のいずれに表示した場合でも常に頭を左にそろえたい。

というふうにしたいと思いました。

　文章だけならばそのままでもブラウザが自動的に画面の幅に合わせて表示してくれるので問題はありませんが、そのうちタイトルだ日付だ概要説明だ写真だなどと表示要素が増え、さらに内容によって文章を段付けしたりしてわかりやすくしようなどとすると多少話がちがってきます。当然なんらかのレイアウト手段が必要になってきます。

このとき私は何の疑いもなく<table>タグを使い始めました。<table>タグを使うと基本的にはブラウザが画面の幅とさらに内容に合わせてすべてうまくやってくれたのです。

　その後少しまじめにHTMLを勉強し始めましたが、そうすると<table>タグをページレイアウトにつかってはいけないなどと言う人もいます。理由は、<table>は表をつくるためのものだからとのこと。だったらリスト<li>ならいいという話もないように思えますが...、なぜか<li>もいけないという人はあまりいません。
では<div>や<span>などを使ってやってみようと思い挑戦しましたが、

...たとえばこのように、 １．(もちろん自動的に)内容に応じた幅で、 ２．文章の頭は左にそろえて、 ３．かつ全体を中央に配置する。 ...というごく単純なレイアウトですらうまくできませんでした。

　主要なブラウザ対象にtableの機能を使わずに<div>とCSS classなどでこんなことが楽にできるというような人はなにも無理にテーブルでのレイアウトなど考えなくていいかもしれません。

　単に私の技量不足からかもしれませんが、当時ずいぶん一生懸命やってできなかった覚えがあります。で結局<div>などを使ってレイアウトするのはあきらめ、以来、いまだに<table>を使い続けています。
　以来すっかり身についてしまったパターンを変えるのも容易ではなさそうですし、今はもう変えるつもりもありません。
　<table>タグは最初一見めんどうと思われるかもしれませんが、慣れればどうということもないし、余計なCSSがいらない分楽だし、実際に出力するのはプログラムだし、読む人はタグを読むわけでもありませんから。

　その後ページをつくり続けながらもなぜレイアウトに<table>タグを使ってはいけないのか時折考えましたが、やっぱりなぜだかわかりません。わからないどころか、レイアウトに<table>を使うのはまさしく理にかなっていると思うようになってきました。

　思えば(特に私のように)ただひたすら文章を長々と書かれてもそこから思考構造や概念などをきっちり区分けして読み取るのは容易ではありません。
それをわかりやすくするために考え出されたのが箇条書き(リスト)であり、さらに発展させたのが表(テーブル)だと思うのです。
　そうだとすると、あるページで言いたいことや考え方の構造をよりわかりやすくするためにリストやテーブルでレイアウトするというのはまさに理にかなっています。(ちょっと論理が飛躍しすぎてる？ でも本当なんだ。)
もちろんこのためのタグがあれば喜んでそれを使ったでしょう。

　ページあるいはその一部のブロック全体にこの構造を浸透させようと思えば私が知る限り<table>が最適です。それは自動的になされるからです(<table>タグというのはそういうものだから)。一方同じような見てくれを個々の要素にいちいちいちいち指定して見せることもできるでしょうが、構造の有無という面から考えたとき、その本質はちがう気がします。結果、<table>を使えば自動的になされる分の余計な手間は省けます。おそらくcssを見ればその差がわかります。

　検索ロボットや情報収集ロボットは今はそのような構造はおそらく理解できません。今度のHTML5はさらにそのような情報収集上理解しがたい(すなわち邪魔なもの)は極力排除しようとしているように思えます。

　さらに現実的なことを言えば、<table>によるレイアウトは(少くとも私が試した)すべてのブラウザ、さらにはどのバージョンでも、問題なく、同じように、思い通りに、表示されたのです。(今でもそうだと思います。)
逆に、<table>タグを使ったいわゆる「表」のようなものを<div>とcssなどで同等に表現してみようとすると、難しい、あるいは面倒なことがよくおわかりになると思います。

　レイアウトに<table>タグをなるべく使わないほうがいいと言う人がいる一方、多くの人が使うのはこのような現実があるからで、結局今のHTMLの根本的な仕様が不十分だということがその根底にあるような気がしてなりません。理にかなったことを仕様にしていないからです。
　レイアウトというのは言い替えれば考え方の基本ですから、それをちゃんと構造化しないでおいてひたすらcssで見た目だけレイアウトするなど全く不自然と言わざるをえません。一見自由度があっていいようにも思えますが、まさしく積木のようなものでブラウザのちょっとした解釈のちがいでそれはもろくも崩れさります。

　ページは２次元ですから２次元の構造をもつ<table>はこの構造化には最適で、<table>を使うことにより基本的な考え方の構造をある程度ブラウザに強制することができるのです。こざかしいルールやテクニックより基本の方が大事です。
これをやっておいてさらに<div>やcssを使うととても楽に確実なレイアウトができます。

　もし全く同じものに<table>ではなく、<layout>とでも名前がついていれば、その昔<table>タグは表をつくるためのものだからレイアウトには使ってはいけないと言った人はこう言ったかもしれません。

このタグはレイアウト用だからこれで表をつくってはいけない。 表をつくるためのタグ？ そんなものはない！

　...さらには、もし<table>をレイアウトに使うことが推奨されていたとして、それでも使わないほうがいいというのならその議論は一読の価値のあるものだとも思いますが。

(追記 2012.8.11)
　書き忘れましたが<table>を使ってレイアウトした場合当然デメリットもあります。
<div>とcssでのレイアウトのようにcssをちょっと書換えてレイアウトをダイナミックに変更するといったことはできません。もっともそんな変更をしてよい内容なら<table>で構造化する必要も必然性もないわけで、テーブルでレイアウトするのは推奨しないというのがこのようなことを指して言っていたのだとすればそれは当然です。

　これらを併せて考えるならば、内容に応じて<div>と<table>を使い分けて、あるいは組み合わせてレイアウトするのが最もよいと思われます。
私はまだあまりそこまではやっていませんがやっぱりこれが正解なのかな。

　また今度のHTML5では、レイアウトテーブルには role="presentation" を指定して(<table role="presentation">と書いて)レイアウト用であることを明示するのがよいとなっているようなのでさっそくいれておきました。(あくまで基本推奨はcssだそうです。cssで楽に確実にできれば...ですが。)

　検索エンジンでの評価ということに関しては全く関係ないように思われます。(おそらく検索エンジンはtable関係のタグは完全に無視しているか、もしかすると逆にその中身をまとまった要素として少し高く評価している？）。
少なくともこのサイトが<table>タグのために検索エンジンに低い評価をされているという気は全くしていません。