Cellpadding and Cellspacing in CSS (part 2)

Here is a follow up to the cellpadding and cellspacing post I made a while back. The cellpadding and cellspacing can be completely controlled in CSS. I realized today. I spoke only about collapsing the borders and not creating spacing or the equivalent of cellspacing equal to something other than 0.

Here are some HTML4 and CSS/XHTML equivalents:

HTML4 :

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

CSS :

table { border-collapse: collapse; }
table tr td { padding: 0px; }

HTML4 :

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

CSS :

table { border-collapse: separate; border-spacing: 2px; }
table tr td { padding: 0px; }

HTML4 :

<table cellspacing="2" cellpadding="2">

CSS:

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

You may want to place these definitions into a CSS class so you can quickly reference your table definition in XHTML:

CSS:

table.info { border: 1px solid #ccc; border-collapse: separate; border-spacing: 2px; }
table.info tr th { font-weight: normal; text-align: right; }
table.info tr td { font-weight: bold; padding: 2px; }

HTML:

<table class="info">
  <tr><th>First Name:</th><td>Chris</td></tr>
  <tr><th>Last Name:</th><td>Schuld</td></tr>
</table>

Here is what it will look like:

<table style="border: 1px solid #ccc; border-collapse: separate; border-spacing: 2px;" border="0">
<tbody>
<tr>
<th style="font-weight: normal;text-align: right;">First Name:</th>
<td style="font-weight: bold; padding: 2px;">Chris</td>
</tr>
<tr>
<th style="font-weight: normal;text-align: right;">Last Name:</th>
<td style="font-weight: bold; padding: 2px;">Schuld</td>
</tr>
</tbody></table>