その他の table プロパティ

display 要素の table プロパティに関する値をまとめて実験します。これらは要素同士が相互に関連するため、単独で利用することも無いだろということで、個別ページは用意しません。
ここで取り上げるプロパティは下の通り。

• table-cell
• table-row
• table-row-group
• table-header-group
• table-footer-group
• table-column
• table-column-group
• table-caption

これらのプロパティは他の display 要素と同じく、設定した要素をテーブルエレメントのように表示する値で、性質は table 要素に含まれる子要素群と同じ結果となる。
これらの値は HTML 以外の言語環境で table 要素を使えない場合に使用すると覚えたのだが、HTML 上でもプロパティとして機能するので、どういった使い方ができるのか実験してみる。

各プロパティの簡単な説明

table-cell

これは table 要素だとテーブル内の構成子要素の th, td に相当する。

インライン要素の中に使ってみた

インライン要素の中で table-cell を設定した要素を単独使用した場合はその前後で改行され、display: block と同じ表示結果となる。
そんな使い方をするか?という突っ込みは置いといて、下はパラグラフ内の「table-cell」と「前後」に span 要素で display: table-cell を設定したサンプル。

HTML
<p>パラグラフ内に現れた <span class="exp-cell">table-cell</span> を持つインライン要素は、その前後で<span class="exp-cell">改行</span>される。</p>

CSS
.exp-cell {
 display: table-cell;
 padding: 0.15em 1.2em;
 margin: 12px;
 color: #f5f5f5;
 background-color: #008080;
}

table-cell を設定した要素には margin を利用することはできない ので注意すること。その他のブロック要素プロパティは利用できるようだ。

ブロック要素に使ってみた

<div>
 <p class="eexp-cell">Example 1</p>
 <p class="eexp-cell">Example 2</p>
 <p class="eexp-cell">Example 3</p>
 <p class="eexp-cell">Example 4</p>
</div>

table-cell を定義したブロック要素は、テーブルセルよろしく横に並ぶ。ただしボックスのマージンは無効。

table-row

table 要素での tr に相当する、内包する要素を一つの行にまとめるプロパティ。table-row に内包された table-sell を持つ要素は関連付けられるが table-cell が設定されていないエレメントはグループから追い出される。
サンプルは p 要素、div 要素、span 要素の異なるブロック要素に対して table-cell を設定し、カラー設定と table-row を設定した div で囲んだところ。

HTML
<div class="example-tr1">
	<p class="exp-cell">Example 1</p>
	<div class="exp-cell">Example 2</div>
	<span class="exp-cell">Example 3</span>
</div>
<div class="example-tr1">
	<p class="exp-cell">Example 4</p>
</div>

CSS

.example-tr2 {
 display: table-row;
 color: #f5f5f5;
 background-color: #008080;
}
.example-tr3 {
 display: table-row;
 color: #f5f5f5;
 background-color: #4169e1;
}
.exp-cell1 {
 display: table-cell;
 padding: 0.15em 1.2em;
}

上記の状態ではセル要素を持った隣り合うエレメントのマージンは設定できない。どうしてもマージンが必要であればボーダーを設定して隙間があるように見せるしかない。
ただし、display: table を指定した要素が親要素として存在する場合は、その親要素に [border-spacing: 間隔 ] を指定しておけば、セルとなる要素同士のマージンを作ることができる。これは下のテストレンダリングとソースおよび CSS を見て欲しい。
ただし²、IE は正しくレンダリングできないと思う。

table-row-group

プロパティ名から想像できると思うが、これは table-row でまとめた行をグループにする、table 要素で言えば tbody と同様な効果を生む。この中に内包されたエレメントをグループデータと位置づけるためのプロパティ。

table-header-group

これもテーブル構造化に使う table 要素の thead と同じ効果を得られる。table-header-group にまとめたグループはヘッダとして扱われる。

table-footer-group

これも同様。tfoot と同じ効果。

上記３つはテーブルを構造化するためのプロパティ。tbody などの HTML 要素ではそれ自体には生成するボックスのない空要素のようなものだが、table-種別-group はボックスを生成するようだ。また HTML の table では thead → tfoot → tbody という順番で記述するとなっているが、display プロパティでテーブル化する際のルールはよく分からない。
注意点は、元の要素では有効だったプロパティでも、上記プロパティを指定すると無効化されるものがあるので気をつけること。ざっとやってみた限りでは font 関連の設定とカラーおよび背景カラーの設定はできるが、width や margin, border などは有効にならないようだ。

下のサンプルは table-row-group を設定した div 要素に使用可能なプロパティを設定してみたもの。「仲間はずれ」というパラグラフを入れたので table-row-group のボックス (ライトイエロー) が分かると思う。

div#tr-group {
 display: table-row-group;
  width: 420px;
 margin: 12px 24px;
 padding: 0.35em;
 color: #333332;
 background-color: #f5f5dc;
 border: 5px solid #6699ff;
 font-size: 12px;
 font-style: italic;
 font-weight: bold;
}
.example-cell3,
.example-cell4 {
 padding: 0.15em 1.2em;
}
.example-cell3 {
 display: table-cell;
}

table-row-group を設定した div の width, margin, padding, border は無視されている。これは Safari や Opera も同様。ちなみにエラーコンソールを見ると、特にエラーになったりはしないようだが、グループ化を行なうプロパティを設定する場合は、有効にならないプロパティは削除しておいた方がよいと思う。
もしかしたら IE はご丁寧に表示するかもしれないしね(笑)

ここまでをまとめて

ここまでのプロパティと display: table を組み合わせたテーブルサンプルです。

HTML と CSS は長いのでこちらの 外部ファイル を見てくだされ。
上でも書いたセル同士のマージンは、親要素の div に border-spacing: 6px; で設定している。調べてみると、これは IE では期待できないようですね。で、Safari だけが table-header-group と table-footerr-group の上下マージンが大きくなるようだ。

table-column と table-column-group

table-column

HTML の table 子要素だと col に相当する、列方向への表示設定を指定するプロパティ。これ自体が生成するブロックはなく、表示上の設定だけを行なう。

table-column-group

HTML の table 子要素では colgroup に相当し、col 要素を持つエレメントをグループ化して表示に関する取り決めを設定、テーブル構造化のために使用する。

table-column と table-column-group をまとめてテスト

HTML では上記２つは同時に使用することが一般的なのだが、display プロパティでこれをどう使うのかよく分からないので実験してみる。

1. p 要素に table-column だけを指定したテスト

div 内に６つの p 要素を配置、その中の３つには table-column を定義してみた。

HTML
<p class="exp-3col1">Example 1</p>
<p>Example 2</p>
<p class="exp-3col1">Example 3</p>
<p>Example 4</p>
<p>Example 5</p>
<p class="exp-3col1">Example 6</p>

CSS .exp-3col1 {
 display: table-column;
 color: #f5f5f5;
 background-color: #9370db;
}

性質通りだと思うが、table-column を定義した p 要素は生成されない。Safari と Opera も同様で、まるで display: none を定義したかのようだ。
使い方が間違っているということだろう。くれぐれもこれを display: none でスパム扱いされることを回避するために使用しないで欲しいものだ。

2. table-cell 値を指定した p 要素を table-column 指定した div と table-column, table-column-group で囲む

テーブル要素を構造化したものなので、テーブルらしくなったと思う。で、これが結果

HTML
<div class="exp-3colgroup1"> このdivにtable-column-groupを定義 -->
 <div class="exp-3col1"> このdivにtable-columnを定義 -->
  <p class="exp-cell3">Example 1</p>
  <p class="exp-cell3">Example 2</p>
  <p class="exp-cell3">Example 3</p>
 </div>
 <div class="exp-3col1"> このdivにtable-columnを定義 -->
  <p class="exp-cell3">Example 4</p>
  <p class="exp-cell3">Example 5</p>
  <p class="exp-cell3">Example 6</p>
 </div>
</div>

コードの上、ドットボーダーで挟んだところにサンプルがあるのだが、全ての要素が生成されない。どうやら table-column や table-column-group を定義すると、レンダリング結果として要素を生成しないようだ。
結局、これをどう使うのか分からないというテスト結果です。

まとめ

ハッキリ言って HTML 上でテーブルを組むために display プロパティを使うのは面倒くさいし非効率的。テーブルを実現するなら素直に table 要素を使用した方がよいということ。
ただし、display プロパティでは table 要素よりも自由度があるので、ちょっと変わったテーブルを作ることができる。そういった意味ではこれは面白いかもしれない。またマージンの扱いに難があるが、float を使用しないレイアウトとしてはバグも少なそうなので良いように思える。
このあたり、自分でもよく分かっていないが、display プロパティでレイアウトデザインを行なうことはどうなんだろう？

Library

• Home
• ってもzilla Archive
• CSS Test Cont.

Selector Group

• display index

• none
• block
• inline
• inline-block
• list-item
• table
• inline-table
• Other table propaties