【メモ】 tableのcellspacingはCSSのborder-collapseで設定できる

こういうtableがあったとして、

日付	内容
12/5	カブのぬか漬け

日付
内容
12/5
カブのぬか漬け

この「cellspacing=”5″」をCSSで表現するとこうなるらしい。

border-collapse: separate;
border-spacing: 5px;

適用例

日付	内容
12/5	カブのぬか漬け

「cellspacing=”0″」の場合は、

border-collapse: separate;
border-spacing: 0;

適用例

日付	内容
12/5	カブのぬか漬け

または

border-collapse: collapse;

適用例

日付	内容
12/5	カブのぬか漬け

で出来る。

参考エントリ

tableタグのcellspacing等をCSSのみで指定する :jBlog

おまけ：リセットCSSでは「cellspacing」解除済み

このブログで使っている「YUI 2: Reset CSS」の場合は、以下が適用されている。

border-collapse: collapse;
border-spacing: 0;

つまり、デフォルトで「cellspacing=”0″」になっているということ。

.sample-table { background-color: #ccc; }
.sample-table th { background-color: #666; color: #fff; }