DevGuru CSS2: border-collapse

PROPERTY: border-collapse

border-collapse : collapse | separate

Compatibility: IE5+
Version: Level 2
Inherited: Yes

The border-collapse property allows you to choose the border model for a table.

There are two types of table border models, collapse and separate. (Not all browsers support both models.)

This is one of five Level 2 properties that specifically apply style to tables. The other four are border-spacing, caption-side, empty-cells, and table-layout.

collapse

The collapse value dictates the use of the collapse model. In this model, the table has an outer border and adjacent cells share a common internal border. (In Netscape, this table will appear as a separate model.)

Cell 1	Cell 2
Cell 3	Cell 4

separate

The separate value dictates the use of the separate model. In this model, the table has a separate outer border and each individual cell has its own separate internal border. The table outer border does not physically touch the individual internal cell borders.

Cell 1	Cell 2
Cell 3	Cell 4

Remember that a border is optional in a table and that the default is no border.

Here is the code for the above two tables:

Code:
<table style="border-collapse: separate" border="5">
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>

<table style="border-collapse: collapse" border="5">
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>