XHTMLの文書構造化とボックスモデル

テーブルレイアウトとはHTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。そこで本連載では、慣れ親しんだテーブルレイアウトか

米倉明男

2008年4月1日 20:00

テーブルレイアウトとは

HTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。

そこで本連載では、慣れ親しんだテーブルレイアウトからなかなか抜け出せない方向けに、CSSレイアウトへスムーズに移行をできるポイントを解説していきます。はじめにCSSレイアウトはHTML 4.01、XHTMLいずれのバージョンでも対応可能ですが、本記事ではXHTML 1.0を対象にCSSコーディングについて解説します。

テーブルレイアウトとは、HTMLタグの1つである表組み

タグを利用してレイアウトを組む方法です。見出しや文章、画像などをそれぞれ表のセル

タグの中に入れていきます。要素の少ない行では、隣接するセルを結合させたり、要素が多い列ではセルの中に新しいテーブルを入れ込む（通称「入れ子」）ことで強引にレイアウトを形成していました。

また、テーブルレイアウトでは隣接する要素間をspacer.gifと呼ばれる1pxの透過gifを拡大することで間隔調整を行っていました。このようなHTMLタグとは違った使われ方をオーサリングソフトも積極的にサポートしてきたために、視覚的なコーディング方法が主流になっていました。

こういった本来の表組み用タグとは異なる使い方をしていたため、それに伴った問題点も出てきました。

まず1つ目の大きな問題点がブラウジングのスピードです。前述のように複雑にセルを繋げたりテーブルを何重にも入れ子にするテクニックがWebブラウザの表示を遅くしたり、HTMLのファイルサイズを重くする原因となりました。

2つ目にアクセシビリティ面があります。音声読み上げWebブラウザでは、HTMLをソース順に読み上げるため、複雑に入り組んだテーブル上では、文章の順番がバラバラになってしまいます。その結果、Webサイトの内容を正確に伝えられなくなりました。

3つ目にSEO（検索エンジン最適化）の重要性が高まったことです。現在の検索エンジンロボットは、タグ付けと文章の内容が一致するWebサイトを優位に評価する傾向が強いため、正確な文章構造、通称「Web準拠」に準じたコーディングが有効と言われています。