Web Design in a Nutshell, 3rd Edition

The values for border-spacing are two length measurements. The horizontal spacing value comes first and is applied between the cells in each row of the table. The vertical value always comes second and is applied between cells in each column. If you provide just one value, it will be applied both horizontally and vertically. The table in Figure 22-4 uses the separated border model.

    table {border-collapse: separate;
           border-spacing: 10px 3px;
           border: none;}

    td { border: 1px solid black; }

Figure 22-4. A table with border-spacing

The default value for border-spacing is 0, which causes adjacent borders to touch, essentially “doubling up” the borders on the inside grid of the table.

When using the separated border model, rows, row groups, columns, and column groups cannot have borders.

If you have a few years of web design experience, you may remember how Netscape 4 required every cell in a table to have content in it or the cell would collapse and the background wouldn’t display. In the CSS separated borders model, you get to decide whether you want empty cells to display their backgrounds and borders or whether they should be hidden using the empty-cells property.

Warning

Internet Explorer for Windows (Versions 6 and earlier) do not support the empty-cells property. IE 5 for the Mac shows and hides cells as expected, but it makes the empty cells too large. Support in IE 7, in beta as of this ...