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″>としてやるのが正解。