HTML and CSS Reference
Figure 11.7 A table with separated borders
The border-spacing property works only when the border-collapse property
value is separate , its default value. If the border-collapse property hasn't been
previously used, we can use the border-spacing property without worry.
Additionally, the border-spacing property may accept two length values: the first
value for horizontal spacing and the second value for vertical spacing. The declaration
border-spacing: 5px 10px; , for example, will place 5 pixels of horizontal spa-
cing between borders and 10 pixels of vertical spacing between borders.
Adding Borders to Rows
Adding borders to a table can be tricky at times, particularly when putting borders between
rows. Within a table, borders cannot be applied to <tr> elements or table structural ele-
ments, so when we want to put a border between rows some thought is required.
We'll begin by making sure the table's border-collapse property value is set to col-
lapse , and then we'll add a bottom border to each table cell, regardless of whether it's
a <th> or <td> element. If we wish, we can remove the bottom border from the cells