display: table

display: table は指定した要素をテーブルにする

Last update: 2008-09-09

要素に対して display: table を指定すると、その要素はテーブルとして表示される。というのは CSS リファレンスなどから知識としては得ているが、実際どういった使い方ができるのかはよく分からない。これも使ったことがないプロパティの一つだ。
table セレクタというのは <table>〜</table> の範囲を表として宣言するセレクタで、table ブロック内にはセルの th や td を tr タグで横列のグループにまとめて表形式で表示する。というのはわざわざ説明するようなものではないが、種類に関係ない要素にテーブルとして振舞いするというのはどういった場面だろうか？

というのも HTML にはセレクタで table があるわけだし、他の要素をテーブルに置き換えるという応用に思い至らないわけで、Web で情報を集めてみたが、詳しい情報には今のところ出会っていない。
何となく参考になりそうなものとしては、HTML では table プロパティを利用する機会はほとんどなく、table セレクタを利用するように記述してあったことくらいだ。
なるほど、その通りだと思うけど、だとネタが続かないので実験してみよう。

display: table を使った実験

1. table プロパティの性質

簡単に理解すると「入れ物」になるわけだが、まっさきに思いつくのは div 要素くらい。なので親要素 div に display: table を設定して、その中に３つの p 要素を入れてみる。

<div id="para-table">
	<p id="testblock-a1">この p は子要素1</p>
	<p id="testblock-a2">この p は子要素2</p>
	<p id="testblock-a3">この p は子要素3</p>
</div>;

この p は子要素1

この p は子要素2

この p は子要素3

うーみゅ、これだと div と何が違うのか分からない。th や td が存在しないので当たり前といえばそのとおりなのだが…、div の直下には th や td といったテーブルの子要素を直接置くことはできないんだなぁ。

他の display のテーブルプロパティを併用してみる

CSS テストはプロパティごとにカテゴリ分けしているので、あまりバッティングしない範囲で。３つの p 要素に display: table-cell (th や td と同じ) を設定してみた。

<div id="para-table">
	<p id="para-th1">この p は子要素1</p>
	<p id="para-th2">この p は子要素2</p>
	<p id="para-th3">この p は子要素3</p>
</div>

この p は子要素1

この p は子要素2

この p は子要素3

なんとなくテーブルらしくなってはきた。だが、table セレクタを使用せずに display プロパティでテーブル化することへのメリットは全くなさそう。 これ以上良いアイデアも浮かんでこないので、新たに良いアイデアを思いついたら続編を作るということで、とりあえずテストは終わりにします。
まとめとしては display: table はあくまで入れ物としてのテーブルブロックを用意するだけで、テーブルとして完成させるためにはテーブルを構成する子要素を作らなくてはいけない。ということで HTML でテーブルを作る場合は、やはり table セレクタで作ることが妥当だろう。

あまりやりたくない方法だが、レイアウトデザインのベースブロックとして使う…というのも考えられるが、なんだか嫌ですねぇーそういうの。

▲ Return to Top