テーブルレイアウト

前回、ハイブリッド実装について書いた中で、table要素についてレイアウト目的に利用することは好ましくありませんと書きました。しかし現実には、これは広く利用されている実装手法で、俗にテーブルレイアウトと呼ばれます。

テーブルレイアウトでは、セル間隔とセル内余白を0ピクセルにしたテーブルと、スペーサーGIFと呼ばれる1ピクセル四方の透明な画像を用い、画像や文章などの情報を意図した場所へレイアウトするのが一般的です。

ちなみにセル間隔とセル内余白を0にしておくのは、ブラウザがデフォルトで適用するそれらの値が、ブラウザの種類やバージョンによって異なっても確実にピクセル単位でレイアウトできるようにするためです。

このテーブルレイアウトという手法は、かつてCSSが今ほど活用できる環境が整っていなかった頃に端を発していますが、メジャーな視覚系ブラウザにおいてバージョンを問わず同じ見栄えを再現できることが多いこともあり、いまだによく利用されています。

しかしながら、Webブラウザやオーサーリングツールの進歩などによってCSSが十分使える技術となった今となっては、積極的に採用すべき手法とはいえません。テーブルレイアウトで実現していることをCSSによる実装へと置き換えることで、多様なソフトウェアやデバイスに対し等価な情報を伝達したり、あるいは表示速度を改善することができるからです。

Web標準に準拠するうえではテーブルレイアウトは好ましくありませんが、それを採用するに足る十分な理由がある場合（想定するターゲットユーザーの閲覧環境がCSSに良く準拠していない古いバージョンのブラウザである等）、アクセシビリティに配慮し、各テーブルセルの読み上げ順序に十分注意したうえで使用することが必要です。

コメント

ＷＥＢ標準初心者で、XHTML、CSSの勉強をしています。
これから、ＷＥＢデザインを学ぶ場合、
テーブルレイアウトも当然の知識として、まだ必要性はあると思われますか？

しおりさま、コメントありがとうございます。XHTMLとCSSの勉強をされているとのことですが、仮にご自身のWebサイトを制作するといった個人的な目的に限定されているようであれば、テーブルレイアウトを学ぶ必要性は低いと思います。

そうではなく、もしWeb制作の業務にプロとして携わっていらっしゃるのであれば、逆に学ぶ必要性は高いと思います。といいますのも、クライアントのニーズやビジネスゴールによっては、レイアウトを完全にCSSで制御したコンテンツが好しとされない場合が現状ではあり得るからです。その場合、当然ながらレイアウト目的でtable要素を用いる必要がありますから、身に着けておいたほうが良いでしょう。

いずれWebブラウザにしろオーサーリングツールにしろ、Web標準を難なく扱える（仕様書とおりの解釈や動作を行う）ものが世の主流となる頃には、たとえプロの現場であっても「テーブルレイアウト」と呼ばれる手法を忘れて良い時期が来るかもしれません。