テーブルレイアウトの光と影

テーブルレイアウトのもたらすもの

テーブルレイアウトとはtable等の、本来表を作るために使われる要素を、レイアウト目的に使うものです。テーブルレイアウトを使うとInternet Explorerのバージョン3～6やNetscape Navigatorのバージョン3～6といった著名なウェブブラウザ全てでピクセル単位で計算された厳密なレイアウトを行うことが出来ます。これによってDTPのような既存のメディア用のデザインを再現することができるようになり、多くのデザイナーにヴィジュアル的可能性を提供しました。

また、テーブルレイアウトでは表示領域を四角形に分割していく形になるので、デザイナーの間で旧来から圧倒的な支持を得てきた(米)Adobe社のPhotoshopやIllustratorといったソフトウェアで作成した画像をいくつかに分割し、テーブルレイアウトで画像として並べていくことで、非常に高度なレイアウトデザインを再現することが出来るのです。そしてHTMLの特色である適合性、表示領域に合わせてサイズが変化するように出来ることで、従来のような固定幅の画像では実現し得ないユーザフレンドリな表現方法が実現するのです。

テーブルレイアウトのサンプル

例えば次の例を見てください。これは非常に簡単なテーブルレイアウトの一例、ソースコードとInternet Explorerによる表示結果です。この例では、表示領域の80%の幅、背景色が#00ccff、中央に配置、等が指定されています。詳しい解説は省かせていただきます。テーブルレイアウトに関する詳しい解説が見たい方は情報リンク集をご覧ください。

<html> <head><title>テーブルレイアウトのサンプル</title></head> <body> <table cellspacing="0" cellpadding="10" border="0" bgcolor="#00ccff" width="80%" align="center"> <tr> <td> hello, world </td> </tr> </table> </body> </html>
テーブルレイアウトのレンダリング結果

テーブルレイアウトはビジュアルを表現するには非常に便利です。テーブルレイアウトを使うことによってDTPのように厳密なレイアウトデザインが出来るのです。これによって現存のほとんどのウェブサイトがテーブルレイアウトを使い、テーブルレイアウトを推奨していないW3C自身もが使用しています。

テーブルレイアウトの罠

いいこと尽くめに思えるテーブルレイアウトですが、落とし穴があります。それは、良いこと尽くめなのが、Internet ExplorerやNetscape Navigatorといった、一部のユーザエージェントだけしか再現されないということです。まあInternet Exploreが80%以上を占める今日では、Internet Explorer以外ってどうゆうこと？なんて声も聞こえてきそうですが、視覚障害者が使うような音声読み上げブラウザや、文字の色や大きさ、画像といった情報を表現できないテキストブラウザ等も数パーセントではありますが使われています。テーブルレイアウトの最大の難点は、これら非グラフィック系と呼ばれるブラウザにおいては、レイアウトを忠実に表現することは愚か、内容物が一切扱えないことさえあることです。なぜならばテーブルは本来、表を表現する為に用意された要素であって、レイアウトを行うようには設計されていないからです。またHTMLの最も重要な働きは、文章に対して意味を付属させることですが、テーブルレイアウトを使ってしまうと、それは成分表や成績表のような表であると認識され、本来その文章の持つ意味とはかけ離れたものになってしまいます。

また、テーブルレイアウトは再利用性という意味でも、問題があります。テーブルレイアウトは個々のページで個々に実装されていますから、例えば全ページのレイアウト変えようと思ったら、全てのページを再編集しなければなりません。この作業は数十ページならまだ何とかなりますが、数百～数千ともなるととても容易には出来ません。もしこれを外部スタイルシートを使って見栄えを定義しているサイトで行ったなら、わずかに数ファイルの外部スタイルシートを編集するだけですみます。

現時点では

個人的には、テーブルレイアウトはグラフィック系のブラウザが観覧する、どうしてもレイアウトに凝りたい限られたページで、使用するには便利だが、大量ページやレイアウトよりも観覧性を重視する場面では使用すべきでないという考えです。

ただ、仕事で作られている方等はそうも言ってられません。現時点ではほとんどの企業家たちはウェブ=ヴィジュアルと認識しており、また自社のイメージをと言う意味ではスタイルシートを用いたレイアウト、デザインには無理があります。従って現時点では、再利用性については妥協し、音声読み上げブラウザやテキストブラウザについては専用のテキストサイトを用意するのが、デザイン、レイアウトを重視する方にとっては、一番妥当な線でしょう。

とは言っても、やはりできる限りは見栄えと中身は切り離したいですね。(こんなこと言うとW3C信者と言われそうですが・・・)