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

CSS

05 Dec 2011

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

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

<table cellspacing="5">
<tr><th>日付</th><th>内容</th></tr>
<tr><td>12/5</td><td>カブのぬか漬け</td></tr>
</table>

この「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	カブのぬか漬け

で出来る。

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

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

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

NOBODY:PLACE