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.
Search WWH ::

Custom Search