Home/Menu

スタイルなCSSの基礎講座

テーブル

◆ はじめに

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

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

◆ テーブル関係

table-layoutプロパティ

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

fixed
テーブル全体のデータをすべて読み込む前に表示します。
あらかじめ、widthプロパティを指定しておく必要があります。
auto(初期値)
テーブル全体のデータをすべて読み込み後に表示します。
適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
table要素autonoNN6,IE5.5ともにまあまあ

border-collapseプロパティ

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

collapse(初期値)
テーブル全体の周りのボーダーと各セルのボーダーを重ねて表示します。
separate
テーブル全体の周りのボーダーと各セルのボーダーを別々に表示します。
適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
table要素collapseyesNN6,IE5.5ともにまあまあ

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

指定なし
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle

collapse指定
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle

separate指定
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle
----------CSS2 ソース------------------------------------------------
.tablesmp1{
    border-collapse: collapse;
}
.tablesmp2{
    border-collapse: separate;
}
---------- HTML4.01 ソース ------------------------------------------
ブラウザのソースの表示で見てください!

border-spacingプロパティ

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

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

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

指定なし
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle

border-spacing: 15px;を指定
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle

border-spacing: 15px 30px;指定
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle
----------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要素showyesNN6

caption-sideプロパティ

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

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
caption要素topyesNN6

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

caption表示下指定
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle

caption表示左指定
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle

caption表示右指定
MicrosoftVS反Microsoft
現状クライアント系は優勢VS劣勢
現状サーバー系は劣勢VS優勢
項目 WebブラウザIEVSネスケ
クライアントPCWindowsVSLinux
サーバマシンNTVSUNIX
データベースSQLサーバーVSoracle
----------CSS2 ソース------------------------------------------------
.captionsmp2{
    caption-side: bottom;
}
.captionsmp3{
    caption-side: left;
}
.captionsmp4{
    caption-side: right;
}
---------- HTML4.01 ソース ------------------------------------------
ブラウザのソースの表示で見てください!

Home/Menu/スタイルシート概説リファレンス