ご無沙汰しております。フリーのマークアップエンジニア草野です。
皆さんは「テーブルレイアウト」をご存知でしょうか？
本来「表組みデータ構造」を表すための要素であるtable要素を、レイアウトの枠として利用するかつて一斉を風靡したWebページのレイアウト手法です。

この手法はWeb標準が広く浸透した今日では基本的にタブーとされているものであり、HTMLメールや某大手ECサイトのような特殊なケースを除き、原則として用いてはならないというのが業界のお約束となっています。

ただ、このテーブルレイアウト、実は普通のフロートレイアウトには無いとても魅力的な特徴があるのです。

フロートレイアウトの弱点

例えば、この図のようなデザインを通常のフロートレイアウトで組もうとしても、フロートの仕様上CSSだけでは実現することができません。フロートで横に並べたボックス同士は常に上揃えにしかならないからです。

また、こちらのようなレイアウトもフロートレイアウトでは実現できません。
フロートで横に並べたボックスの高さを、自動的に最も大きい物に揃えることはCSSではできないからです。

「上下中央で揃えられない」「並んだボックスの高さを揃えることができない」というのは、フロートレイアウトの二大弱点なのですが、困ったことにこのようなレイアウトの要望はデザイン的にごく当たり前であり、日常的に発生するものであるというのが現実です。
しかし仕様として出来ないものはできないので、手動でマージンを設定したり、JavaScriptを活用したり、positionを併用してトリッキーな実装を行ったりして何とかしのいできたのがこれまでの実態でした。

ところが、「上下中央で揃える」「並んだボックスの高さを自動的に揃える」というデザイン要望を、「テーブルレイアウト」であれば簡単に、しかもCSSだけで実現できるのです！

仮想テーブルレイアウト

テーブルレイアウトと言っても、昔のように本当にtable要素をレイアウトの枠として使うのではありません。あくまでマークアップは本来の役割通り、divやその他の文書構造に則した要素を使用し、そのdisplayプロパティの値をdisplay:table、display:table-cell;などのtable要素が持つ値に変更することでブラウザの挙動だけtable要素のように振る舞わせる、「仮想テーブルレイアウト」という手法を使うのです。

table関連の主な要素と、それに割り当てられたデフォルトのdisplay値は次の通りです。
このdiv等の要素のdisplay値を、これらtable系のdisplay値に変更することで、table系の各要素と同様のふるまいをさせることが可能となります。

要素名	display値
table	table
th,td	table-cell
tr	table-row
tbody	table-row-group
thead	table-header-group
tfoot	table-footer-group
caption	table-caption

上記の中でも仮想テーブルレイアウトで特によく使うものが「display:table;」と「display:table-cell;」です。よほど特殊なレイアウトでない限り、基本的に仮想テーブルレイアウトではこの２つの値を駆使して実装をしていきます。

次回から数回にわたって、仮想テーブルレイアウトの活用例を紹介していきたいと思います。
お楽しみに！

• 
•