ほんっとにはじめての HTML5 と CSS3

テーブルじゃない要素に display: table と指定して、その中の子要素に display: table-cell を指定すれば、まるでテーブルの <td>要素のような表示になります。

テーブルの要素として扱えると、こんなメリットがあります。

• ブロックレベルの要素を簡単に横並びにできる（display: inline-block や float を使わなくても）
• 横並びにしたボックスの高さを揃えられる（テーブルのセルは元々高さが揃うので）
• セル内の子要素の位置を上下のセンターにできる（テーブルセルは vertical-alignが効くので）
• 横並びのボックスを均等な幅にできる（table-layout: fixed が使えるので）
• CSS2.1からのモノなので IE8でも対応していて安心（参考：Can I Use : CSS Table display）

実際に <table>要素や <td>要素を使うんじゃなく、その性質だけ利用するわけなので、HTMLの文法上 間違った要素の使い方をせずにテーブルレイアウトができます。
（ テーブルレイアウト とは「レイアウトのためだけにテーブル関連の要素を使う」こと。昔はよくあったけど今は非推奨）
というわけで、今回はこの display: table を使ってみましょう。

1. displayプロパティのテーブル関連の値
   1. display:tableを親要素に指定する
   2. display:table-cellで要素をテーブルセルにする
   3. display:table-rowで要素をテーブルの行（tr）にする
   4. display:table-captionでキャプションをつける
   5. display:inline-tableは親要素をインラインのテーブルにする
   6. displayプロパティのその他のテーブル関連の値でグルーピングする
2. 正しいコンテンツ・モデルじゃないとエラーになるよ

display プロパティは記事を数回に分けています。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう

displayプロパティと値の一覧／display: inline／block／inline-block／none／run-in

【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく

display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます

【17-2-2】リスト関連の要素のためのCSSプロパティ

リスト関連の要素だけに使えるCSSプロパティをまとめます

【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく　←今ココ

display:table で、テーブル関連じゃない要素にテーブルの性質を与えます

【17-3-2】テーブル関連の要素のためのCSSプロパティ

テーブル関連の要素だけに使えるCSSプロパティをまとめます

【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに

display:ruby で、要素にルビ（ruby）を表示する機能を与えます

【17-4-2】ルビ関連の要素のためのCSSプロパティ

ルビ関連の要素だけに使えるCSSプロパティをまとめます

【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex に関しては、Flexbox として仕切り直します。 display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

dosplayプロパティのテーブル関連の値

dosplayプロパティのテーブル関連の値一覧です。
（リンクは「ほんっとにはじめてのHTML5」の記事へのリンクです。別ウィンドウで開きます）

display のテーブル関連の値
table	要素は<table>要素と同じ性質になります。
table-cell	要素はテーブルのセル = <td>要素と同じ性質になります。
table-row	要素は<tr>要素と同じ性質になります。
table-header-group	要素は<thead>要素と同じ性質になります。
table-row-group	要素は<tbody>要素と同じ性質になります。
table-footer-group	要素は<tfoot>要素と同じ性質になります。
table-column-group	要素は<colgroup>要素と同じ性質になります。
table-column	要素は<col>要素と同じ性質になります。
table-caption	要素は<caption>要素と同じ性質になります。
inline-table	要素は<table>要素と同じ性質だけど、インラインの並び方になります。

値の継承	なし	適用できる要素	全部

<thead>とか <colgroup>とか、聞き慣れない要素も出てきますが、詳しくは下記の過去記事をご覧ください。（クリックで別ウィンドウで開きます）

• [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
• [16-2] table にタイトルをつけよう（caption）
• [16-5] table横列グループ化（thead, tbody, tfoot）
• [16-6] table縦列グループ化（colgroup, col）

それでは、テーブル関連の displayの値を順に見て行きましょう。

display:tableを親要素に指定する

他のテーブル関係の値を指定する前に、必ず親の要素に display: table を指定します。
中の子要素をテーブルセルにしたかったら、絶対に親をテーブルにしなきゃです。これはお約束。

しかし親要素に display: table と指定しただけじゃ何も起こりません。
子要素に display: table-cell と指定するところまでやらないと無意味。
それは次の項で。

ちなみに、（ここから若干余談ですが...w）
<table>要素って、中身が無ければぺったんこなんです。
ボーダーや背景を指定しても、中に1つもテーブルセルが無ければ何も表示されないのがデフォルト。

例えば下のソースだと、ブラウザの画面上には何にも表示されません。
HTMLにインラインでCSSを書いています。ボーダーや背景を指定しています。

<table style="border:solid 5px #f0f; background-color:#cf9">
 <!--中身が何も無い-->
</table>

ここ↓に一応、この↑ソースの table があるんだけど、見えないよね。

中に1つでも テーブルセル（<td>か <th>）が入れば、ボーダーや背景も表示されます。

<table style="border:solid 5px #9c0; background-color:#cf9">
 <td>これなら見える？</td>
</table>

上のソースのプレビューはこちら↓

これなら見える？

この <table>要素の特徴を生かした clearfix（クリアフィックス）があります。
（clearfixとは floatプロパティを使った後に フロートを解除するためのCSSソースです）
★float、 clearプロパティ、clearfix に関しては、こちらをご覧ください。
【21】floatプロパティと clearプロパティ。そして Clearfixについて
★擬似要素 ::after などについては
【3】id とか classって何？（セレクタの「種類」を知っておこう）

display:table-cellで要素をテーブルセルにする

要素に display: table-cell を指定すればテーブルセルになります。
ここで重要なのは、display: table-cell だけ指定しても何も起こらないこと。親要素に display: table を指定しなければ、子要素はテーブルセルにはなれません。
「親要素 = display: table」「子要素 = display: table-cell」が必ずセットなの。これ重要。しつこいようだけど。テーブルあってのテーブルセルってことですね。

下のサンプルは <span>要素に display: table-cell を指定してみました。
親要素の <div>に display: table を指定しましたよ。
＊実際のレイアウトで テーブルセルに <span> はお勧めしないけど、インラインの要素でも可能という例として使っています。

上のサンプルの HTMLです。

<div id="smp1_2">
<span>1.middle</span>
<span>2.bottom</span>
<span>3<br>3<br>3<br>3<br>3</span>
</div>

サンプルの CSSです。

div#smp1_2 {
	margin:1em 0;
	padding:1em 0;
	display:table;
	border-collapse:separate; /*セルの間隔を空ける*/
	border-spacing:1em 0; /*セルの間隔が左右1em 上下無し（最初が左右。詳しくは次回）*/
	background:#666;}
div#smp1_2 span {
	display:table-cell;
	padding:1em}
div#smp1_2 span:nth-child(1) {background:#ffc;vertical-align:middle}
div#smp1_2 span:nth-child(2) {background:#fcf;vertical-align:bottom}
div#smp1_2 span:nth-child(3) {background:#cff}

テーブルセルになると、内容量がバラバラでも高さが揃うのが特徴ですね。
そして、vertical-alignプロパティ（11,12行目）が効くようになるので、上下の中央や、下揃えもできるようになります。これは便利です。
vertical-alignプロパティに関しては、
【32】インラインの縦方向の整列を決める vertical-alignプロパティをご覧ください。

サンプル内で使っている border-collapse（5行目）、border-spacing（6行目）は、テーブル専用のCSSプロパティです。
これらは次回の【17-3-2】テーブル関連の要素のためのCSSプロパティ でまとめます。

display: table と display: table-cell、そしてvertical-align を使ったサンプルは、
以前【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について の記事でも紹介しました。
vhという単位を使ってボックスを画面いっぱいにして、その縦中央にコンテンツを表示したい時にはテーブルの性質を使うのが最適というサンプルです。
↓クリックで別ウィンドウで開きます。

display:table-rowで要素をテーブルの行（tr）にする

テーブルセルは、ほっとけばず〜っと横に並びます。
セルを2行（2段）にしたいときは、テーブルでは <tr>を使いますね。
<tr>要素のような性質にしたいときは、要素に display: table-row を指定します。これで先ほどテーブルセルにした要素を囲んでやれば、行を変えることができるんです。
下のサンプルでは、セルを3つずつ <p>要素で囲んで2行にしています。

上のサンプルの HTMLです。

<div id="smp1_3">
<p> <!--p要素でセルを囲みます-->
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p> <!--2行目も-->
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>

サンプルの CSSです。

div#smp1_3 {
	margin:1em 0;
	padding:0;
	display:table;
	border-collapse:separate;
	border-spacing:1em; /*セルの間隔が上下左右1emにしています*/
	background:#666;}
div#smp1_3 p {
	display:table-row;  /*セルを囲んだp要素にtable-rowを指定*/
	margin:0; padding:0}
div#smp1_3 span {
	display:table-cell;
	padding:1em;
	background:#ffc}

この <tr>化した <p>要素が無ければ、このように横にズラ〜っと並びますよ。

display:table-captionでキャプションをつける

テーブルは <caption>要素を使ってタイトルをつけることができますが、
（<caption>要素については [16-2] table にタイトルをつけよう（caption）に詳細）
これと同じコトを display: table-caption でできます。
下のサンプルは、<div>要素を使って caption を表示しています。

上のサンプルの HTMLです。

<div id="smp1_4">
<div>テーブルのタイトル</div>  <!--タイトル（キャプション）をdiv要素で-->
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>

サンプルの CSSです。

div#smp1_4 {
	margin:1em 0;
	padding:0;
	display:table;
	border-collapse:separate;
	border-spacing:1em;
	background:#666;}
div#smp1_4 div {
	display:table-caption; /*table-captionを指定します*/
	line-height:1.5em;
	border-bottom: solid 1px #999;
	margin-bottom:0.5em;
	font-size: 85%;
    font-weight: bold;
	text-align:center}
div#smp1_4 p {
	display:table-row;
	margin:0; padding:0}
div#smp1_4 span {
	display:table-cell;
	padding:1em;
	background:#ffc}

display:inline-tableは親要素をインラインのテーブルにする

親要素に display: inline-table を指定すれば、テーブルを横に並べることもできます。

上のサンプルの HTMLです。

<div id="smp1_5">
  <span>cell</span>
  <span>cell</span>
</div>
<div id="smp1_5plus">
  <span>cell</span>
  <span>cell</span>
</div>

サンプルの CSSです。

div#smp1_5, div#smp1_5plus {
	margin:0;
	margin-right:0.5em;
	padding:0;
	display:inline-table;
	border-collapse:separate;
	border-spacing:1em;
	background:#666;}
div#smp1_5 span, div#smp1_5plus span {
	display:table-cell;
	padding:1em;
	background:#ffc}
div#smp1_5plus span {background:#fcf}

displayプロパティのその他のテーブル関連の値でグルーピングする

このほか、テーブルを構成する要素には、横列をグループ化する <thead> <tbody> <tfoot> や、縦列をグループ化する <colgroup> <col> がありますが、displayプロパティでこれらを指定することもできます。
グルーピングすることによって、背景などのスタイルの指定が省力化できます。

<thead> の性質は、display: table-header-groupで
<tbody> の性質は、display: table-row-groupで
<tfoot> の性質は、display: table-footer-groupで
<colgroup> の性質は、display: table-column-groupで
<col> の性質は、display: table-columnで指定できます。

サンプルは、横列グループにする display:table-header-group を使って背景をピンクに。
また、縦列グループにする display:table-column-group と display:table-column を使って、背景を赤・グレー・イエローにしています。

上のサンプルの HTMLです。

<div id="smp1_6">
<div id="colg"><div id="col1"></div><div id="col2"></div><div id="col3"></div></div>
<!--2行目は↑縦列グループ化のための要素群-->
<div id="thd">  <!--横列グループ化のための要素（thead用）-->
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>  <!--ここまで id="thd"-->
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>

サンプルの CSSです。

div#smp1_6 {
	margin:1em 0;
	padding:0;
	display:table;
	border-collapse:separate;
	border-spacing:1em;
	background:#666}
div#smp1_6 p {
	display:table-row;
	margin:0; padding:0}
div#smp1_6 p span {
	display:table-cell;
	padding:1em}
div#smp1_6 div#colg {display:table-column-group} /*colgroupの宣言*/
div#smp1_6 div#col1, 
div#smp1_6 div#col2, 
div#smp1_6 div#col3 {display:table-column} /*3つのdivをcolに*/
div#smp1_6 div#col1 {background:red}
div#smp1_6 div#col2 {background:#ccc}
div#smp1_6 div#col3 {background:#ffc}
div#smp1_6 div#thd {display:table-header-group; background:#fcf} /*theadは背景ピンクに*/

<thead>要素の使い方はなんとなくわかると思うけど、
HTML要素の <colgroup> <col> のグルーピングの仕方はちょっと特殊ですね。
過去記事でそれぞれの使い方をまとめていますので、見てみてください。
[16-5] table横列グループ化（thead, tbody, tfoot）
[16-6] table縦列グループ化（colgroup, col）

正しいコンテンツ・モデルじゃないとエラーになるよ

display: table 関係を使用する要素は、当然ながら正しい「コンテンツ・モデル」じゃないとエラーになります。
コンテンツ・モデルとは「要素の中にどんな要素を置くか」のルールです。

例えば、グループ化するための要素に<span>要素も使えますが、その中に入る要素はフレージング・コンテンツじゃないとダメ。<p> や <div> は入れられない。
この法則までは変えられません。
なので、グルーピングするなら無難なところで <div>とかを使っておこう。

コンテンツ・モデルについては、
[37] HTML5要素の「カテゴリー」を見てみよう
[38-1] 「コンテンツ・モデル」で要素のルールを見てみよう
[38-2] 「コンテンツ・モデル」一覧
をご覧ください。

次回予告

さて、display: table などを使うためには、テーブル用のCSSプロパティを知らなきゃ話になんないので、次回はテーブル用のCSSプロパティをまとめます。
またも displaypプロパティの流れの途中で別のプロパティの話になっちゃいますが、やはりひとまとめにしておいたほうがイイと思うので。

関連記事

• 【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
• 【18-3】Flexbox内の縦（垂直）方向を揃えよう
• 【18-2】Flexbox内のボックスの配置方法を指定しよう
• 【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
• 【17-4-2】ルビ関連の要素のためのCSSプロパティ
• 【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに
• 【17-3-2】テーブル関連の要素のためのCSSプロパティ
• 【17-3-1】display:table でテーブルじゃない要素をテーブルっぽく
• 【17-2-2】リスト関連の要素のためのCSSプロパティ
• 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
• 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
• （ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法
• 【16-2】下限の min-width, min-height 上限の max-width, max-height
• 【16-1】幅の width、高さの heightプロパティ
• 【15-5】backgroundのショートハンド まとめ