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>

caption-sideプロパティのサンプル表示

table-layoutプロパティ

table-layoutプロパティ」は、表のセル、列、行をレイアウトするためのアルゴリズムを指定する。 その書式は以下のとおりである。

table-layoutプロパティ
auto | fixed | inherit
初期値auto
適用対象"displayプロパティ"が"table"あるいは"inline-table"の要素
継承しない
パーセント値受けつけない
auto
アルゴリズムに「自動レイアウト」を指定する。実際の描画はブラウザに依存する。
fixed
アルゴリズムに「固定レイアウト」を指定する。このアルゴリズムを使用するためには、表全体の幅を明示する必要があります。 表要素に対する計算値が"auto"の場合は、アルゴリズムに自動レイアウトが使用される。固定レイアウトでは, 各列の幅のつぎのように決定される。
  1. "widthプロパティ"が、"auto"以外の列は、その列の幅を設定する。
  2. そうでない場合は、最初の行にあるセルの"widthプロパティ"が"auto"以外の場合は、その列の幅を設定する。 セルが1つ以上の列にまたがる場合は、複数の列分の幅を表す。
  3. 以上で幅が決まらない列は、残りの幅を均等に分割する。

つぎの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-layout:autoのサンプル表示

つぎに、固定レイアウトのスタイルと、その場合の表示結果を示す。

table {
    width: 200px;
    table-layout: fixed;
}

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;
}

border-collapse:collapseのサンプル表示

つぎに、分離ボーダーモデルのスタイルと、その場合の表示結果を示す。

table {
    width: 200px;
    table-layout: fixed;
    border-collapse: separate;
}

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>

border-spacingプロパティのサンプル表示

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; }

empty-cells:showプロパティのサンプル表示

つぎに、"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; }

empty-cells:hideプロパティのサンプル表示

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.