Firefox 3が対応したdisplayプロパティの値（3） - inline-table

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

テーブルとテキストを揃える位置

　テキストなどのインライン要素は、標準ではベースラインで揃えて表示することになっている。テキストにおけるベースラインは以下の図の赤線で示したラインのことで、欧文書体の基準線となっている。

ベースライン

　一方、inline-tableボックスとして表示したテーブルにもベースラインが存在する。そのため、ブラウザによってテーブルとテキストを揃えた位置が異なるのは、inline-tableボックスのベースラインの位置設定が異なるためと考えられる。

　inline-tableボックスの場合、CSS 2ではどこがベースラインになるのかが定義されていない。しかし、CSS 2.1では「テーブルの最初の行をベースラインとする」と定義されており、Firefox 3やOperaはこの定義に従って表示を行っていると考えられる。一方で、SafariやInternet Explorer 8は、テーブルの下部をベースラインとして処理していると考えられる。

　なお、vertical-alignプロパティを利用すれば、テーブルとテキストをどこに揃えて表示するかを指定することが可能だ。たとえば、「vertical-align: top」と指定すると、次のように上を揃えて表示することができる。

Firefox 3の表示

Safariの表示

Operaの表示

Internet Explorer 8の表示

table{
display: inline-table;
border: solid 3px #00aaff;
vertical-align: top;
}

td{
border: solid 2px #ccff00;
padding: 5px;
}

※ブラウザで表示を確認する

　次回は、displayプロパティのまとめとして、inline-blockやinline-table以外のボックスと、各ブラウザの対応状況などを紹介したい。