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

HTML4 の時代の table タグでセルの空白を無くす場合は、

<table border="0" cellspacing="0" cellpadding="0">

などと指定していましたが、これをスタイルシートで実現するにはどうすれば良いか解説します。

CSS の指定方法

まず、table タグで CSS の class を指定します。
ここではクラス名を zero とします。

<table class="zero">

次に、CSS ファイルや style 要素などで、下記のように指定します。

table.zero {
    border-collapse: collapse;
    border: 0px;
}

table.zero tr td {
    padding: 0px;
}

プロパティの解説

border-collapse がボーダーの隙間を作るかどうかのプロパティで、値に collapse を指定することで隙間が無くなります。
これが table タグの cellspacing="0" に相当します。

• border-collapse - CSS: カスケーディングスタイルシート | MDN

また、例えば 2ピクセルの隙間を作りたい場合は、下記のように指定します。

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

border-collapse プロパティに separate を指定することで隙間が出来るようになり、border-spacing プロパティでその隙間の幅を指定します。
border-spacing: 2px 1px; 等とすることで、上下左右別に幅を指定することも可能です。

• border-spacing - CSS: カスケーディングスタイルシート | MDN

その他、table タグの border 属性に相当するのは、border または border-width プロパティで、cellpadding 属性に相当するのは、td タグへの padding プロパティの指定です。

• border - CSS: カスケーディングスタイルシート | MDN
• border-width - CSS: カスケーディングスタイルシート | MDN
• padding - CSS: カスケーディングスタイルシート | MDN

table タグ属性と CSS の対応表

• cellspacing → border-collapse と border-spacing
• cellpadding → td タグの padding
• border → border-width または border

おわりに

そんなわけで、HTMLタグだけで指定したほうが文字数は少なく抑えられますが、わざわざスタイルシートを使うメリットはもちろん、見栄えと構造が分離されることでソースの見通しが良くなるからです。
最近はブラウザの CSS 対応状況もかなり改善されてますから、CSS で指定可能な見栄えは極力 CSS 依存にしたほうが良いのではないかと思います。