ptg16476052258 LESSON 10: Building Tables
Output ▼
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>
table {
border-collapse: separate;
border-spacing: 10px 5px;
}td, th {
border: 1px solid black;
padding: 5px;
}
</style>FIGURE 10.11
How increased cell
spacing looks.FIGURE 10.12
Using CSS to spec-
ify cell spacing and
cell padding.