「display: table」 で、「table」以外の要素を使って表組みをつくる

サンプルファイル

CSSの「display」プロパティを使えば、テーブル関連要素では無い、HTML要素にテーブルの性質を持たせる事ができる。との事で色々と実験してみました。

以前から、「グローバルナビゲーションの横並び」、「子要素の上下の間隔の中央配置」といった用途などでは使用していたのですが、あまり深く勉強していなかったので、今回もう少し踏み込んだ使い方をしてみました。

今回作成したサンプルで、実際に使用したCSSのプロパティーは以下になります。

HTML要素に指定した、CSS「display」プロパティ
HTML	CSS「display：」	対応するテーブル要素
article	table	table 要素
h2	table-caption	caption 要素
div	table-row-group	tbody 要素
section	table-row	tr 要素
h3	table-cell	th,td 要素
p	table-cell	th,td 要素
End

1. まず始めに、article 要素を「table」要素化
2. 次に、直下の h2 要素を 「caption」 要素化
3. h2 と同じ階層の、div 要素 を 「tbody」要素化
4. div の下の階層の sec tion要素 を「tr」要素化
5. section の下の階層の h3, p 要素を「th, td」要素化

という具合にテーブル要素化してみました。

具体的な階層は以下の様になります。

どんな要素もテーブル要素化できますが、正しいコンテンツモデルでないとエラーになるそうです。なのでdivなどを使うのが無難。参考URLほんとうにはじめてのHTML様

今回は、「SEOに強いテーブル」という事も意識していたので、アウトラインを持つ、article 要素の下にh2要素、section要素の下にh3要素という様に、HTMLのよく使われる階層構造をテーブル化してみました。