border-collapse（セルの枠線）

解説

HTMLのテーブルにおけるセルの枠線の処理を指定する属性です。
tableエレメントのcellspacingアトリビュートと同じ扱い。
border-collapse:separateを指定した場合、border-spacing属性で枠線間スペースを指定できますが、現在のブラウザは、border-spacing属性に未対応です。

値	collapse：セルの枠線が重って表示 separate：セルの枠線が個々に表示（通常）
初期値	collapse
%値の基準
適用	テーブルエレメント
継承	する

対応状況

全ての値

使用例

ソース

スタイル部に、

table.collapse{border-collapse:collapse;}
table.separate{border-collapse:separate;}
td.border{border:medium solid blue;}

と記述し、

body部に、

<table class="collapse">
<caption>collapse</caption>
<tr><td class="border">collapse</td><td class="border">separate</td><tr>
<tr><td class="border">セルの枠線が重って表示</td><td class="border">セルの枠線が個々に表示</td></tr></table>
<br>
<table class="separate">
<caption>separate</caption>
<tr><td class="border">collapse</td><td class="border">separate</td><tr>
<tr><td class="border">セルの枠線が重って表示</td><td class="border">セルの枠線が個々に表示</td></tr></table>

と記述すると。

表示＆操作

collapse
collapse	separate
セルの枠線が重って表示	セルの枠線が個々に表示

separate
collapse	separate
セルの枠線が重って表示	セルの枠線が個々に表示

　
と表示されます。

pokochan@mx1.tees.ne.jp