HTML and CSS Reference
In-Depth Information
When the design calls for space between cells, you'll need work with two border-related properties:
border-collapse
and
border-spacing
. The
border-collapse
property determines whether table
cells share borders or have separate ones. If
border-collapse
is set to
collapse
, the borders are
shared; when the property is set to
separate
, the borders are independent. Figure 17-3 shows the
same table with
border-collapse: collapse
on the bottom and
border-collapse: separate
on the top. The default behavior is to keep the borders separate.
FiGure 17-3
For the
border-spacing
property to have any effect,
border-collapse
must be defined as
separate
.
After all, you can't have space between cell borders unless they're separate, can you? The spacing
around a cell can be set to all be the same by using a single value, like this example:
table {
border-spacing: 5px;
}
Note that, as with the
border-collapse
property, the
border-spacing
property is defined
within a
table
selector. This declaration tells the browser to put 5 pixels on the top, bottom,
left, and right of all table cells. Say that you wanted to increase the space between the top and
bottom of the cells, but keep the area between left and right sides the same. For this effect, you'd
use two values, like this:
table {
border-spacing: 5px 15px;
}
When the preceding CSS rule is rendered, you can see a clear difference, as shown in Figure 17-4.
The first value in a
border-spacing
declaration controls the horizontal spacing, and the second
controls the vertical.
