Thursday, June 5th, 2008
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:
| First Name: | Chris |
|---|---|
| Last Name: | Schuld |
Doesn’t work in IE6 or IE7.