HTML and CSS Reference
In-Depth Information
If you want to completely eliminate any whitespace separating con-
tent in table cells, you must set the table's border, cell padding,
and cell spacing to 0 . Laying out your tables this way is unusual,
but it can be useful if you've sliced up an image and you want to
reassemble it properly on a web page.
The CSS equivalent of the cellspacing attribute is the border-spacing property, which
must be applied to the table. To use it, the border-collapse property must not be set to
collapse, as it eliminates cell spacing. border-spacing is slightly different than padding .
With padding , you can specify the padding for all four sides of an element. border-
spacing takes one or two values. If one value is specified, it is used for all four sides of
each cell. If two are specified, the first sets the horizontal spacing and the second sets the
vertical spacing. The table in Figure 10.12 uses the following style sheet, which sets the
cell padding for each cell to 5 pixels, and sets the cell spacing for the table to 10 pixels
horizontally and 5 pixels vertically:
<style type=”text/css”>
table {
border-collapse: separate;
border-spacing: 10px 5px;
td, th {
border: 1px solid black;
padding: 5px;
FIGURE 10.12
Using CSS to
specify cell spac-
ing and cell
Column Widths
You also can apply the width attribute to individual cells ( <th> or <td> ) to indicate the
width of columns in a table. As with table widths, discussed earlier, you can make the
width attribute in cells an exact pixel width or a percentage (which is taken as a
Search WWH ::

Custom Search