Controlling the Space
(X)HTML has long had two attributes for the table tag that allow it to control spacing between the contents of a cell and its border (cellpadding) and between one border and the next (cellspacing). And while they're well supported and perfectly reasonable, they're not very flexible. You can't, for example, affect the cell spacing on a single side, or add cell padding just to a few cells in a table.
Figure 16.39. Cell spacing adds space between cells. Cell padding adds space between a cell's contents and its border.
CSS on the other hand lets you use the now familiar padding property (see page 177) to control space on every side of a cell, as well as between paragraphs and other elements. It is a welcome substitute for cellpadding.
Figure 16.40. I have set both the cellpadding and cellspacing to zero so that there is no extra space around or between the cells of my logo bar (and other elements).
Unfortunately, although the CSS property for controlling cellspacing (border-spacing), continues to be supported by almost all major browsers, Internet Explorer (up to and including version 7) remains the notable exception, rendering the property virtually unusable.
Figure 16.41. The extra spaces between the cells disappear (especially in the logo bar and between the logobar and the fish bar). The table appears seamless (if a little squished). In Explorer, there is no margin or padding above the p and h1 elements in cells.
To control cell padding with (X)HTML:
In the table tag, type cellpadding="n", where n is the number of pixels that should appear between the contents of a cell and its border.
Figure 16.42. In many browsers, the margin and padding for the H1 and p elements leave extra space at the top of the cells' interior.
To control cell spacing with (X)HTML:
In the table tag, type cellspacing="n", where n is the number of pixels that should appear between one cell border and the next.
To control cell padding with CSS:
In the desired rule, type padding: value, where value is a length in pixels or a percentage of the parent element.
To control cell spacing with CSS:
In the desired rule, type border-spacing: value, where value is a length in pixels or a percentage of the parent element.