Mainpage
Border-spacing has a similar effect, but it works with units as parameters:
border-spacing: horizontal-spacing vertical-spacing;, or
border-spacing: horizontal-and-vertical-spacing;
| This is column 1 | This is column 2 | This is column 3 | This is column 4 |
|---|---|---|---|
| Here's data | Here's data | Here's data | Here's data |
| Here's data | Here's data | Here's data |
Important: The table in 2) (border-collapse) is a table of the Collapsing Border Model, and the table here in 3)
(border-spacing) is a table of the Separated Borders Model. It is important to understand
there are two different kinds of tables and the model is set by border-collapse: and border-spacing:.
Why? Because there's more to that than just the different commands for the gap around each table cell.
The following two paragraphs and the sub-chapter 'empty-cells' are only necessary for Opera up to 8.5x and IE6. Opera 9 (the beta) and Firefox don't react as expected, they show the border anyway, with or without the 'empty-cells' command:
Have you noticed that the last cell of all the tables is empty? Now look for the border around that empty cell in the collapsing border model and compare that to the looks in the separated borders model.
The cell is there, in both models, as you can tell from the white background, but the border is not there in the separated borders model. Empty cells don't have borders in that model, unless you tell them with a specific style:
