このページでは,テーブル(表)に関する主なプロパティについて説明します。
「displayプロパティ」によって生成するブロックの種類を指定することは先に説明したとおりです。ここでは,表に関係するブロックを生成する値について説明します。(※ これらの値を"displayプロパティ"に指定しても無視するブラウザもあります。)
「caption-sideプロパティ」は,キャプション(表題)の位置を指定します。その書式は以下のとおりです。
caption-sideプロパティ | |
---|---|
値 | top | bottom | inherit |
初期値 | top |
適用対象 | "displayプロパティ"が"table-caption"の要素 |
継承 | する |
パーセント値 | 受けつけない |
以下にサンプルのスタイルと,それを適用したHTMLコードおよび表示結果を示します。
caption { caption-side: bottom; }
<table border="2">
<caption>キャプション</caption>
<tr><th>見出し1</th><td>データ1</td></tr>
<tr><th>見出し2</th><td>データ2</td></tr>
</table>
「table-layoutプロパティ」は,表のセル,列,行をレイアウトするためのアルゴリズムを指定します。その書式は以下のとおりです。
table-layoutプロパティ | |
---|---|
値 | auto | fixed | inherit |
初期値 | auto |
適用対象 | "displayプロパティ"が"table"あるいは"inline-table"の要素 |
継承 | しない |
パーセント値 | 受けつけない |
つぎのHTMLコードにテーブルレイアウトのスタイルを適用することを考えてみましょう。
<table border="2">
<tr><th>見出し1</th><td>あいうえおかきくけこ</td></tr>
<tr><th>見出し2</th><td>さしすせそたちつてと</td></tr>
</table>
まずは,自動レイアウトのスタイルと,その場合の表示結果を示します。
table {
width: 200px;
table-layout: auto;
}
つぎに,固定レイアウトのスタイルと,その場合の表示結果を示します。
table {
width: 200px;
table-layout: fixed;
}
「border-collapseプロパティ」は,表のボーダー(境界)モデルを指定します。その書式は以下のとおりです。
border-collapseプロパティ | |
---|---|
値 | collapse | separate | inherit |
初期値 | separate |
適用対象 | "displayプロパティ"が"table"あるいは"inline-table"の要素 |
継承 | する |
パーセント値 | 受けつけない |
それでは,つぎのHTMLコードを使って,ボーダーモデルの違いを見てみましょう。
<table border="1">
<tr><th>見出し1</th><td>あいうえおかきくけこ</td></tr>
<tr><th>見出し2</th><td>さしすせそたちつてと</td></tr>
</table>
まずは,結合ボーダーモデルのスタイルと,その場合の表示結果を示します。
table {
width: 200px;
table-layout: fixed;
border-collapse: collapse;
}
つぎに,分離ボーダーモデルのスタイルと,その場合の表示結果を示します。
table {
width: 200px;
table-layout: fixed;
border-collapse: separate;
}
「border-spacingプロパティ」は,分離ボーダーモデルにおいて,隣接するセルのボーダー間隔を指定します。その書式は以下のとおりです。
border-spacingプロパティ | |
---|---|
値 | <長さ> <長さ>? | inherit |
初期値 | 0 |
適用対象 | "displayプロパティ"が"table"あるいは"inline-table"の要素 |
継承 | する |
パーセント値 | 受けつけない |
以下にサンプルのスタイルと,それを適用したHTMLコードおよび表示結果を示します。
table {
width: 200px;
table-layout: fixed;
border: 1px solid #000;
border-collapse: separate;
border-spacing: 10px 5px;
}
th,td { border: 1px solid #000; }
<table>
<tr><th>見出し1</th><td>あいうえおかきくけこ</td></tr>
<tr><th>見出し2</th><td>さしすせそたちつてと</td></tr>
</table>
「empty-cellsプロパティ」は,分離ボーダーモデルにおいて,空のセルのボーダーおよび背景の表示方法を指定します。その書式は以下のとおりです。
empty-cellsプロパティ | |
---|---|
値 | show | hide | inherit |
初期値 | show |
適用対象 | テーブルセル要素 |
継承 | する |
パーセント値 | 受けつけない |
ここで,「空のセル」とは以下のセルのことを意味します。
それでは,つぎのHTMLコードを使って,空のセルの表示方法の違いを見てみましょう。
<table>
<tr><th></th><th>4月</th><th>5月</th><th>6月</th></tr>
<tr><th>りんご</th><td>100</td><td>200</td><td>300</td></tr>
<tr><th>みかん</th><td>600</td><td>500</td><td>400</td></tr>
</table>
まずは,"show"の場合のスタイルと,その表示結果を示します。
table {
width: 300px;
background-color: #000;
table-layout: fixed;
border: 1px solid #000;
border-collapse: separate;
border-spacing: 1px;
empty-cells: show;
}
th,td { background-color: #fff; }
td { text-align: right; }
つぎに,"hide"の場合のスタイルと,その表示結果を示します。
table {
width: 300px;
background-color: #000;
table-layout: fixed;
border: 1px solid #000;
border-collapse: separate;
border-spacing: 1px;
empty-cells: hide;
}
th,td { background-color: #fff; }
td { text-align: right; }