CSS【 display 】3～table

displayプロパティでdisplay: tableと指定して、その中の子要素に display: table-cell を指定すると、table要素と同じように表示することができます。
今回は、displayプロパティでdisplay: tableを指定した場合のサンプル表示などを紹介したいと思います。

displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1 ～ 要素の表示形式を指定するdisplayプロパティ
CSS【 display 】2 ～ list-item
CSS【 display 】3 ～ table（本ページ）

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. displayプロパティの値

テーブル関連の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要素と同じ性質で、インラインの並び方になる

　
displayプロパティの値は、継承されません。
また、displayプロパティは、全ての要素で使用できます。

▲目次へ戻る

2. display:table

displayプロパティを使ってテーブルを表示させたい場合は、まず、親要素に display: table を指定します。
中の子要素をテーブルセルとして指定していくので、先に親要素を指定することは必須です。

そして、親要素に display: table と指定しても、それだけではテーブルを表示することはできません。
子要素に display: table-cell を指定してはじめてテーブルらしい形となります。

▲目次へ戻る

3. display:table-cell

親要素に display: table を指定した上で、子要素に display: table-cell を指定すると、テーブルセルとなります。

div要素に display: table を指定し、span要素に display: table-cell を指定すると、次のように表示されます。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
    margin:1em 0;
    padding:1em 0;
    display:table;
    border-spacing:1em;
    background:#AAA}
div#sample span {
    display:table-cell;
    padding:.5em}
div#sample span:nth-child(1) {background:blue}
div#sample span:nth-child(2) {background:red;vertical-align:middle}
div#sample span:nth-child(3) {background:green}

<!-- HTMLファイル -->
<div id="sample">
    <span>セル１</span>
    <span>セル２</span>
    <span>セル３</span>
</div>

真ん中のセルはvertical-align:middleを指定しているので、文字が中央揃えになっています。同様に、上揃えと下揃えも指定できます。

border-spacingプロパティは、セルの外枠の間隔を指定するテーブル専用のプロパティです。

▲目次へ戻る

4. display:table-row

テーブルセルは、どんどん横に並びます。
table要素内のtr要素のような働きをさせたい場合には、要素に display: table-row を指定します。
display: table-row を指定した要素でテーブルセルの要素を囲むと、改行することができます。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
    margin:1em 0;
    padding:0;
    display:table;
    border-spacing:1em;
    background:#AAA}
div#sample p {
    display:table-row;
    margin:0; padding:0}
div#sample span {
    display:table-cell;
    padding:1em;
    background:#31A9EE}

<!-- HTMLファイル -->
<div id="sample">
    <p>
        <span>１行目セル１</span>
        <span>１行目セル２</span>
        <span>１行目セル３</span>
    </p>
    <p>
        <span>２行目セル１</span>
        <span>２行目セル２</span>
        <span>２行目セル３</span>
    </p>
</div>

table-rowを指定したp要素で、各行のセルを囲んでいます。

▲目次へ戻る

5. display:inline-table

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

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample1, div#sample2 {
    margin:0;
    margin-right:0.5em;
    padding:0;
    display:inline-table;
    border-collapse:separate;
    border-spacing:1em;
    background:#AAA;}
div#sample1 span, div#sample2 span {
    display:table-cell;
    padding:1em;
    background:#31A9EE}
div#sample2 span {background:#FF9696}

<!-- HTMLファイル -->
<div id="sample1">
    <span>１-１</span>
    <span>１-２</span>
</div>
<div id="sample2">
    <span>２-１</span>
    <span>２-２</span>
</div>

各div要素に、display:inline-tablを指定しています。

▲目次へ戻る

6. display:table-header-group

このほか、table要素内には、グループ化を行うthead要素、tbody要素、tfoot要素、colgroup要素、col要素がありますが、displayプロパティでも同じような指定をすることができます。

display: table-header-group	thead要素と同じ性質
display: table-row-group	tbody要素と同じ性質
display: table-footer-group	tfoot要素と同じ性質
display: table-column-group	colgroup要素と同じ性質
display: table-column	col要素と同じ性質

▲目次へ戻る