CSS2 » Properties » border-collapse

Version: Level 2

Compability: IE5+

border-collapse : collapse | 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 1Cell 2
Cell 3Cell 4

Remember that a border is optional in a table and that the default is no border.
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

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

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.


<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 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>

Here is the code for the above two tables.

Language(s): CSS2

See Also: