よく、レイアウトを整える目的で TABLE を使う人がいます。酷い場合にはテクニックと称して、自慢げに紹介したりしてします（「本当は良くないけれど」と断って紹介している人はまだ良心的と言えます）。
彼らは、それが間違いであることは認識しているのかも知れません。しかし、迷惑であることを理解している人がどれだけいるでしょうか。
テーブルでレイアウトをしようなどと考えてしまうのは、以下のようなことを知らないからでしょう。
HTMLの (SGMLの) 利点は「論理構造の記述だけを行うことで、環境に依存しない、どんな環境でも利用できる文書を作ることが出来る」ということです。それゆえ、HTML文書は高解像度フルカラーの画面、モバイル機の小さな白黒画面、インターネットテレビ、音声出力、点字出力、等々、ありとあらゆる機器で利用できるのです。
テーブルでレイアウトを固定するというのは、そうした HTML のせっかくの利点を殺すことになります。
TABLE は HTML+、RFC1942 などを経て、HTML3.2 でようやく採用されたものです。つまり、わりと新しい技術です。当然のことながら、対応していないブラウザもかなりの数が存在します。Lynx や MOSAIC などがそうです。それらのブラウザで「テーブルでのレイアウト」を見ると、悲惨なことこの上ない状態になります。
多くのブラウザは TABLE を逐次表示できません。TABLE の中身全てを読み込まないと表示が開始できないのです。ですから、巨大な TABLE はなかなか表示されません。特に文書全体を一つの TABLE で括っているような場合、本気で全く何も表示されない時間が長く続き、何かのトラブルかと思い始めた頃にようやく表示されたりします。訪問者は、待ちきれずに「中止」ボタンを押して別のサイトへ行ってしまうかもしれません。
<TABLE border=0> とすると枠線はたいてい消えます。けれども私の環境では消えません。枠線なしの表はとても見づらいので、細い水色の線を表示するように設定してあります。ですから、レイアウト用のテーブルでもセル間の区切りがはっきりと見えます。
他にもこういうことをしている人はいるかもしれません。
最も重要なのは、TABLE が読み上げられるときのことです。さて、以下はどんな表を読み上げたものでしょうか？
HTML4.0 の 3種の DTD の位置づけを示す表です。それぞれで「廃止要素」、「非推奨要素」、「フレーム定義」が使えるか否かを示しています。 HTML4.0の DTD - 機能 対応表、DTD と HTMLバージョンの名称、廃止要素使用の可否、非推奨要素使用の可否、フレーム機能使用の可否、StrictDTD(HTML4.0 Strict)、否、否、否、LooseDTD(HTML4.0 Transitional)、否、可、否、FramesetDTD(HTML4.0 Frameset)、否、可、可
どうでしょうか。なにがなんだか分からない、というのが正直なところではないでしょうか。これは次のような表を、ただ先頭から順に読んでいったものです。ちなみに、ソースもありますので随時参考にしてください。
| DTD と HTMLバージョンの名称 | 廃止要素使用の可否 | 非推奨要素使用の可否 | フレーム機能使用の可否 |
|---|---|---|---|
| StrictDTD(HTML4.0 Strict) | 否 | 否 | 否 |
| LooseDTD(HTML4.0 Transitional) | 否 | 可 | 否 |
| FramesetDTD(HTML4.0 Frameset) | 否 | 可 | 可 |
この表をわかりやすくするためには、以下のように読むと良いでしょう。
まず SUMMARY を読む。「HTML4.0の3種のDTDそれぞれで……」
SUMMARY が存在しなければ、以下が表であり、読み上げ方法を切り替えることを知らせる。「表を読み上げます」
CAPTION を読む。「HTML4.0の DTD - 機能 対応表」
THEAD に属するセルを順に読む。「DTD と HTMLバージョンの名称」「廃止要素使用の可否」「非推奨要素使用の可否」「フレーム機能使用の可否」
次に、TBODY に属するセルを読まずに、「DTD」と読み上げる（これは「DTD と HTMLバージョンの名称」の略として指定されている ABBR 属性の値）。
ABBR がなければ、セルの内容そのものを読み上げる。「DTD と HTMLバージョンの名称」
TBODY に属するセルを読む。「StrictDTD(HTML4.0 Strict)」
四番目、五番目の手順を繰り返す。すなわち、表の一列目は以下のように読み上げられる。
「DTD、StrictDTD(HTML4.0Strict)。廃止、否。非推奨、否。フレーム、否」
同様に TBODY 二列目。「DTD、LooseDTD(HTML4.0Transitional)。廃止、否。非推奨、可。フレーム、否」
TBODY 三列目。「DTD、FramesetDTD(HTML4.0Frameset)。廃止、否。非推奨、可。フレーム、可」
最後に、表の読み上げが終わった旨を知らせる。「表の読み上げが終わりました」
以上は HTML4.0 の表で細かい指定をしていた場合の話ですが、SCOPE などの指定がなくても、機転を効かせてこのような読み方をさせることは可能でしょう。
……しかし、レイアウトのために表を使ったりしていると、とんでもない順番で読み上げられて何がなんだか分からなくなります。そんなわけで、この優れた読み上げ機構は普及しないことになるでしょう。細かい指定のない表は平板に順番にしか読まれなくなってしまいます。
レイアウト目的の表は、無意味に表示が遅くなりますし、訪問者のブラウザによってはめちゃくちゃになります。それに、読み上げ機構の普及を妨げる原因にも成ります。
というわけで、レイアウトに表を使うのは好ましくありません。出来る限り使わないようにしましょう。
世の中には、「テーブルでレイアウトをするのは避けよう」などと言っておきながら、自分とこのトップページで平然とそれをやっているというすごい集団もあります。でも、お手本にしてはいけません。
2003年1月22日追記 : 上記リンク先は W3C トップページですが、W3C トップは 2002年12月4日にリニューアルされ、レイアウトに表を使用しなくなりました。この W3C トップページリニューアルについては、W3C Home Page Table-less Layout: HOWTO and FAQ に詳しく書かれています。