CSS cellpadding and cellspacing

There is one spiny issue when trying to move a html source from inline to CSS styling and that is the parameters of the table: cellspacing and cellpadding in particular.

From my tests it appears that cellpadding is overwritten by the CSS styling (the first time I ever see an inline attribute being overridden by CSS), however cellspacing does not. In order to remove the default cellspacing, use border-collapse:collapse on the table.

In order to set the table cellspacing through CSS, use the border of the td elements. Unfortunately, it doesn't work with transparent color, so you must set it to the color of the background. No luck if the background is an image. Margin on the cells doesn't work. Who uses cell spacing, anyway? Non Internet Explorer browsers have a table property called border-spacing, but it only works for some DOCTYPEs even in other browsers, so it's not reliable.

To set the table cell padding through CSS, just use the padding property of the cells. As I said earlier, it overrides the cellpadding property of the table.

So, in order to set 5px cell spacing and 5px cell padding through CSS, use this:

 body {
  background-color:white; /* use the same color for the border of cells */
 }
 table {
  border-collapse:collapse; /* remove default cellspacing */
  border-spacing:5px; /* it works on some browsers on some DOCTYPEs */
 }
 td {
  padding:5px; /* cell padding */
  border:5px solid white; /* cell spacing */
 }

You should set the padding as a general rule for all the TDs on the page. CSS classes like

table.MyClass td { padding:1px }

will affect all cells in all child tables! The more general the CSS selector, the easier will be to avoid overwriting some of your normal settings. For example, the CSS rule above would override

.myTD { padding-right:3px; }

because it is more specific.