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%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
テーブル関連の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プロパティは、全ての要素で使用できます。
displayプロパティを使ってテーブルを表示させたい場合は、まず、親要素に display: table を指定します。
中の子要素をテーブルセルとして指定していくので、先に親要素を指定することは必須です。
そして、親要素に display: table と指定しても、それだけではテーブルを表示することはできません。
子要素に 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>セル1</span>
<span>セル2</span>
<span>セル3</span>
</div>
真ん中のセルはvertical-align:middleを指定しているので、文字が中央揃えになっています。同様に、上揃えと下揃えも指定できます。
border-spacingプロパティは、セルの外枠の間隔を指定するテーブル専用のプロパティです。
テーブルセルは、どんどん横に並びます。
table要素内のtr要素のような働きをさせたい場合には、要素に display: table-row を指定します。
display: table-row を指定した要素でテーブルセルの要素を囲むと、改行することができます。
1行目セル1
1行目セル2
1行目セル3
2行目セル1
2行目セル2
2行目セル3
ソースは次の通りです。
<!-- 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>1行目セル1</span>
<span>1行目セル2</span>
<span>1行目セル3</span>
</p>
<p>
<span>2行目セル1</span>
<span>2行目セル2</span>
<span>2行目セル3</span>
</p>
</div>
table-rowを指定したp要素で、各行のセルを囲んでいます。
親要素に 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>1-1</span>
<span>1-2</span>
</div>
<div id="sample2">
<span>2-1</span>
<span>2-2</span>
</div>
各div要素に、display:inline-tablを指定しています。
このほか、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要素と同じ性質 |
INTERNOUS,inc. All rights reserved.