HTML and CSS Reference
In-Depth Information
NOTE
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:
10
<style type=”text/css”>
table {
border-collapse: separate;
border-spacing: 10px 5px;
}
td, th {
border: 1px solid black;
padding: 5px;
}
</style>
FIGURE 10.12
Using CSS to
specify cell spac-
ing and cell
padding.
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
