[CSS, HTML]table layout with CSS

毎日考ブログ:Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」をみて思い出した。

CSS2のdisplayプロパティには、table形式の表示をする属性値がある。TABLE関連のそれぞれのタグに相当する属性値が用意されている。w3cの説明では、table要素があらかじめ用意されていない言語(XMLとか)でテーブル表示をやるために用意しているんだそうな。

この属性値を使えば、テーブルレイアウトが使い放題だ。やり方はレイアウト用のtableタグとほぼ同等だ。違いはcolspanやrowspanが無いこと。
CSSを使ったときの 大まかなレイアウトがやりにくい という問題も解決する。table, table-row, table-cellの3つが使えていればfloat使っていたら、要素がどこかに飛んでいってしまったみたいな大きな崩れも無いはずだ。

ちょっと気になるのは、CSSでもHTMLのtableタグと同等の構成が欲しいものなのか？
tableタグは結構ネストが深いので、単純なものでも<table><tbody><tr><td>と同じ深さのネストになる。入れ子にしていると結構辛いかも知れない。

table-rowやtable-cellは表示したい要素自身に設定するようにした方が余計なdivが増えない。colspanやrowspanはCSSの指定を工夫しよう、ページのヘッダをtable-header-group, フッタをtable-footer-group, メニューリストをtable-caption指定にすればOK。メニューリストをページの上下左右どこに表示するかはcaption-sideで調整できるはずだ。
#thead, tfootタグをまともにサポートしているブラウザが少ないので、table-header-groupとtable-footer-groupは表示位置がおかしいブラウザが多いかもしれない。

注意。IEはdisplay:tableをサポートしてません :P