18. テーブル
ここでは、テーブル(表)に関する主要なプロパティについて説明する。
表に関係するdisplayプロパティ
「displayプロパティ」によって生成するブロックの種類を指定することは先に説明したとおりである。 ここでは、表に関係するブロックを生成する値の説明する。(※ これらの値を"displayプロパティ"に指定しても無視するブラウザも多い。)
- table
- 指定された要素をブロックレベル要素の表とする。(X)HTMLのtable要素に相当する。
- inline-table
- 指定された要素をインラインレベル要素の表とする。(X)HTMLのtable要素に相当する。
- table-row
- 指定された要素を表の行とする。(X)HTMLのtr要素に相当する。
- table-row-group
- 指定された要素を表の行グループとする。(X)HTMLのtbody要素に相当する。
- table-header-group
- "table-row-group"と同様に行グループとする。ただし、視覚整形のときには、 他の行より前、上側キャプションの後に表示される。(X)HTMLのthead要素に相当する。
- table-footer-group
- "table-row-group"と同様に行グループとする。ただし、視覚整形のときには、 他の行より後、下側キャプションの前に表示される。(X)HTMLのtfoot要素に相当する。
- table-column
- 指定された要素を表の列とする。(X)HTMLのcol要素が該当する。
- table-column-group
- 指定された要素を表の列グループとする。(X)HTMLのcolgroup要素に相当する。
- table-cell
- 指定された要素を表のセルとする。(X)HTMLのth要素、td要素に相当する。
- table-caption
- 指定された要素を表のキャプションとする。(X)HTMLのcaption要素に相当する。
caption-sideプロパティ
「caption-sideプロパティ」は、キャプション(表題)の位置を指定する。 その書式は以下のとおりである。
caption-sideプロパティ | |
---|---|
値 | top | bottom | inherit |
初期値 | top |
適用対象 | "displayプロパティ"が"table-caption"の要素 |
継承 | する |
パーセント値 | 受けつけない |
- top
- キャプションを表の上部に配置する。
- bottom
- キャプションを表の下部に配置する。
以下にサンプルのスタイルと、それを適用した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プロパティ」は、表のセル、列、行をレイアウトするためのアルゴリズムを指定する。 その書式は以下のとおりである。
table-layoutプロパティ | |
---|---|
値 | auto | fixed | inherit |
初期値 | auto |
適用対象 | "displayプロパティ"が"table"あるいは"inline-table"の要素 |
継承 | しない |
パーセント値 | 受けつけない |
- auto
- アルゴリズムに「自動レイアウト」を指定する。実際の描画はブラウザに依存する。
- fixed
- アルゴリズムに「固定レイアウト」を指定する。このアルゴリズムを使用するためには、表全体の幅を明示する必要があります。 表要素に対する計算値が"auto"の場合は、アルゴリズムに自動レイアウトが使用される。固定レイアウトでは, 各列の幅のつぎのように決定される。
- "widthプロパティ"が、"auto"以外の列は、その列の幅を設定する。
- そうでない場合は、最初の行にあるセルの"widthプロパティ"が"auto"以外の場合は、その列の幅を設定する。 セルが1つ以上の列にまたがる場合は、複数の列分の幅を表す。
- 以上で幅が決まらない列は、残りの幅を均等に分割する。
つぎの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プロパティ」は、表のボーダー(境界)モデルを指定する。 その書式は以下のとおりである。
border-collapseプロパティ | |
---|---|
値 | collapse | separate | inherit |
初期値 | separate |
適用対象 | "displayプロパティ"が"table"あるいは"inline-table"の要素 |
継承 | する |
パーセント値 | 受けつけない |
- collapse
- 「結合ボーダーモデル」を指定する。結合ボーダーモデルでは、表のボーダーとセルのボーダーが結合される。
- separate
- 「分離ボーダーモデル」を指定する。分離ボーダーモデルでは、表のボーダーとセルのボーダーが分離される。
それでは、つぎの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プロパティ」は、分離ボーダーモデルにおいて、隣接するセルのボーダー間隔を指定する。 その書式は以下のとおりである。
border-spacingプロパティ | |
---|---|
値 | <長さ> <長さ>? | inherit |
初期値 | 0 |
適用対象 | "displayプロパティ"が"table"あるいは"inline-table"の要素 |
継承 | する |
パーセント値 | 受けつけない |
- <長さ>
- 間隔を単位付き数値で指定する。"長さ"の指定が1つだけの場合は、上下左右がすべて同じ間隔となる。 2つ指定された場合は、1つ目が左右間隔、2つ目が上下間隔となる。"長さ"に負の数値を指定することはできない。
以下にサンプルのスタイルと、それを適用した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プロパティ」は、分離ボーダーモデルにおいて、空のセルのボーダーおよび背景の表示方法を指定する。 その書式は以下のとおりである。
empty-cellsプロパティ | |
---|---|
値 | show | hide | inherit |
初期値 | show |
適用対象 | テーブルセル要素 |
継承 | する |
パーセント値 | 受けつけない |
- show
- 空のセルのボーダーと背景が表示される。
- hide
- 空のセルのボーダーと背景が表示されない。表要素の背景が透過される。
ここで、「空のセル」とは以下のセルのことである。
- 空セル
- "visibilityプロパティ"が"hidden"に設定されているセル
- 空白文字(※ 空白(¥20)、水平タブ(¥09)、復帰(¥0D)、改行(¥0A))しか含まれていないセル
それでは、つぎの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; }