CSS2 » Properties » border-collapse
Version: Level 2
Compability: IE5+
- Syntax:
- border-collapse : collapse | separate
- 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. - 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
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.
Examples
Code:
<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>
<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>Explanation:
Here is the code for the above two tables.
Language(s): CSS2
See Also:
