HITP 広島工業大学専門学校

ホームページの基礎(2. CSS 編)

← 2.17 リスト  CSS総目次  2.19 @規則 →

  1. 2.18 テーブル
    1. 2.18.1 表に関係するdisplayプロパティ
    2. 2.18.2 caption-sideプロパティ
    3. 2.18.3 table-layoutプロパティ
    4. 2.18.4 border-collapseプロパティ
    5. 2.18.5 border-spacingプロパティ
    6. 2.18.6 empty-cellsプロパティ

2.18 テーブル

このページでは,テーブル(表)に関する主なプロパティについて説明します。

2.18.1 表に関係するdisplayプロパティ

displayプロパティ」によって生成するブロックの種類を指定することは先に説明したとおりです。ここでは,表に関係するブロックを生成する値について説明します。(※ これらの値を"displayプロパティ"に指定しても無視するブラウザもあります。)

table
指定された要素をブロックレベル要素の表とします。XHTMLのtable要素に相当します。
inline-table
指定された要素をインラインレベル要素の表とします。XHTMLのtable要素に相当します。
table-row
指定された要素を表のとします。XHTMLのtr要素に相当します。
table-row-group
指定された要素を表の行グループとします。XHTMLのtbody要素に相当します。
table-header-group
"table-row-group"と同様に行グループとします。ただし,視覚整形のときには,他の行より前,上側キャプションの後に表示されます。XHTMLのthead要素に相当します。
table-footer-group
"table-row-group"と同様に行グループとする。ただし,視覚整形のときには,他の行より後,下側キャプションの前に表示されます。XHTMLのtfoot要素に相当します。
table-column
指定された要素を表のとします。XHTMLのcol要素に相当します。
table-column-group
指定された要素を表の列グループとします。XHTMLのcolgroup要素に相当します。
table-cell
指定された要素を表のセルとします。XHTMLのth要素,td要素に相当します。
table-caption
指定された要素を表のキャプションとします。XHTMLのcaption要素に相当します。

CSS総目次 | ページ先頭に戻る

2.18.2 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プロパティのサンプル表示

CSS総目次 | ページ先頭に戻る

2.18.3 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のサンプル表示

CSS総目次 | ページ先頭に戻る

2.18.4 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のサンプル表示

CSS総目次 | ページ先頭に戻る

2.18.5 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プロパティのサンプル表示

CSS総目次 | ページ先頭に戻る

2.18.6 empty-cellsプロパティ

empty-cellsプロパティ」は,分離ボーダーモデルにおいて,空のセルのボーダーおよび背景の表示方法を指定します。その書式は以下のとおりです。

empty-cellsプロパティ
show | hide | inherit
初期値show
適用対象テーブルセル要素
継承する
パーセント値受けつけない
show
空のセルのボーダーと背景が表示されます
hide
空のセルのボーダーと背景が表示されません。表要素の背景が透過されて見えることになります。

ここで,「空のセル」とは以下のセルのことを意味します。

それでは,つぎの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プロパティのサンプル表示

CSS総目次 | ページ先頭に戻る

(C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.