tableの属性cellspacing="0", cellpadding="0"をCSSで対応する

CSSによるレイアウトが普及して、table要素をレイアウト用途に使うことは少なくなったけれども、純粋な表として使うことはなくならない。

で、表とセルの隙間をなくすために<table cellspacing=”0″ cellpadding=”0″>なんてするんですが、CSSでコントロールしたほうが後々修正は楽。このやり方をすぐ忘れてしまうのでメモ。

cellspacing=”0″ cellpadding=”0を使った例

<table cellspacing="0" cellpadding="0">
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

cellspacing=”0″ cellpadding=”0″を使わない例

<style type="text/css">
table {
	border-collapse: collapse;
}
</style>

<table>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

border-collapse: collapse;一発で隙間がなくなる。楽。多くの場合隙間は必要ないので、デフォルトで入れておき、例外として、cellpadding=”2″等の0以外のケースを対応する。これをCSSでやろうとすると下の通り。

table {
	border-collapse: separate;
	border-spacing: 2px;
}

ただ残念なことに、border-spacingはIEが対応していないので実質使えない。そういう時はどうするか。素直に<table cellspacing=”2″>としてやるのが正解。