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.

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.

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.

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.

In the table tag, type cellspacing="n", where n is the number of pixels that should appear between one cell border and the next.

In the desired rule, type padding: value, where value is a length in pixels or a percentage of the parent element.

In the desired rule, type border-spacing: value, where value is a length in pixels or a percentage of the parent element.

Tips

The default value for cell padding is 1.
The default value for cell spacing is 2.

Figure 16.43. To finish adjusting the spacing in the table, we need to adjust the margin and padding properties. I've reduced the width of the toc to 110 to accommodate the 10 pixels of left padding.
When using tables for layout, it's perhaps easiest to set both the cellpadding and cellspacing to zero and then selectively add padding and margins with CSS.

Figure 16.44. Now we've got the spacing under control.

[View full size image]
Both cellpadding and cellspacing must be applied to the entire table as a whole. To control spacing in and around individual cells, use the CSS properties.
You can use the CSS margin property (see page 176) to control the spacing between H1 and p elements that may be contained in cells, or the space around a table.
Remember that the CSS alternative to cellpadding is called padding, while the CSS alternative to cellspacing is called border-spacing. The padding property can be used on any element; border-spacing is just for table cells.
The border-spacing property is inherited but padding is not.
Netscape 6 is so scrupulous with standards that it adds a bit of space under inline images in table cellsfor descenders, one must presume. As long as you only have one image per cell, you can get rid of the space by making the images block level (see page 30). Or you can trigger quirks mode (see page 41).

Controlling the Space

Figure 16.39. Cell spacing adds space between cells. Cell padding adds space between a cell's contents and its border.

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).

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.

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.

Figure 16.43. To finish adjusting the spacing in the table, we need to adjust the `margin` and `padding` properties. I've reduced the width of the toc to 110 to accommodate the 10 pixels of left padding.

Figure 16.44. Now we've got the spacing under control.

Controlling the Space

Figure 16.39. Cell spacing adds space between cells. Cell padding adds space between a cell's contents and its border.

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).

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.

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.

Figure 16.43. To finish adjusting the spacing in the table, we need to adjust the margin and padding properties. I've reduced the width of the toc to 110 to accommodate the 10 pixels of left padding.

Figure 16.44. Now we've got the spacing under control.

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).

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.

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.

Figure 16.43. To finish adjusting the spacing in the table, we need to adjust the `margin` and `padding` properties. I've reduced the width of the toc to 110 to accommodate the 10 pixels of left padding.