マークアップセンター

マークアップセンター

マークアップ初心者の為のHTML、CSSまとめブログ


Amebaでブログを始めよう!
今日は、border-collapseについてです。

適用要素:table要素


①border-collapse:collapse
テーブル全体の周りのボーダーや各セルのボーダーを、
その境界線上に重ねて表示。(初期値)

②border-collapse:separate
テーブル全体の周りのボーダーと各セルのボーダーを別々に表示。

参考URL:http://www.htmq.com/style/border-collapse.shtml

border-collapseプロパティの値がseparateのときのみ
有効になるのがborder-spacingです。

しかし、border-spacingはIEでは使用できず、
その場合、table要素にcellspacingを記述することで
セル同士の間隔を指定することができます。

参考URL:http://www.tagindex.com/html_tag/table/table_cellspacing.html


【まとめ】
table要素3つのポイント
(1)border-collapse:separateとborder-spacingはセットで使用

↓ ・・・(2)しかしIEでは使用できないので

(3)table要素にcellspacingを記述