スタイルなCSSの基礎講座

◆ はじめに

つぎは、テーブルのプロパティです。

尚、ご使用のブラウザのスタイルシート対応度によって、表示が異なる場合があります。

• スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
• スタイルシートのリファレンスは、こちらにありますので参照してください。
• 尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。

◆ テーブル関係

table-layoutプロパティ

table-layoutプロパティは、テーブルの表示方法を設定します。
設定値は、以下の通りです。

fixed

テーブル全体のデータをすべて読み込む前に表示します。
あらかじめ、widthプロパティを指定しておく必要があります。

auto（初期値）

テーブル全体のデータをすべて読み込み後に表示します。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
table要素	auto	no	NN6,IE5.5ともにまあまあ

border-collapseプロパティ

border-collapseは、セルのボーダーの表示形式を設定します。
設定値は、collapseとseparateがあります。

collapse（初期値）

テーブル全体の周りのボーダーと各セルのボーダーを重ねて表示します。

separate

テーブル全体の周りのボーダーと各セルのボーダーを別々に表示します。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
table要素	collapse	yes	NN6,IE5.5ともにまあまあ

サンプルは、以下の通りです。

----------CSS2 ソース------------------------------------------------
.tablesmp1{
	border-collapse: collapse;
}
.tablesmp2{
	border-collapse: separate;
}
---------- HTML4.01 ソース ------------------------------------------
ブラウザのソースの表示で見てください！

border-spacingプロパティ

border-spacingプロパティは、隣接する各セルのボーダーの間隔を設定します。
設定値は、値が１つの場合は、上下左右の間隔、値が２つの場合は、左右の間隔、上下の間隔の順です。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
table要素	0	yes	NN6,IE5.5ともにまあまあ

サンプルは、以下の通りです。

----------CSS2 ソース------------------------------------------------
.tablesmp3{
	border-collapse: separate;
	border-spacing: 15px;
}
.tablesmp4{
	border-collapse: separate;
	border-spacing: 15px 30px;
}
---------- HTML4.01 ソース ------------------------------------------
ブラウザのソースの表示で見てください！

empty-cellsプロパティ

empty-cellsプロパティは、空セルのボーダーの表示のありなしを設定します。
設定値は、show,hideで、th要素、td要素に適応します。
サンプルは、割愛いたします。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
th,td要素	show	yes	NN6

caption-sideプロパティ

caption-sideプロパティは、テーブルのキャプションの位置を設定します。
設定値は、top,bottom,left,rightで初期値はtopです。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
caption要素	top	yes	NN6

サンプルは、以下の通りです。

----------CSS2 ソース------------------------------------------------
.captionsmp2{
	caption-side: bottom;
}
.captionsmp3{
	caption-side: left;
}
.captionsmp4{
	caption-side: right;
}
---------- HTML4.01 ソース ------------------------------------------
ブラウザのソースの表示で見てください！