Table border-collapse Property
By Stephen Bucaro
In a standard html table, each cell has a separate border (which will not be
visible if the border attribute is set to 0). This causes the table cell borders
to appear double, as shown below.
Table Caption
Col1 Title | Col2 Title | Col2 Title |
Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 |
Above is a basic html table with no style applied.
Table Caption
Col1 Title | Col2 Title | Col2 Title |
Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 |
Above, by setting the html attribute cellspacing="0" you can put the cell
borders next to each other. In the above table I also set the html attribute
cellpadding="4". Unfortunately the cellspacing and cellpadding attributes are not
supported in HTML5.
The style property border-collapse tells the cell borders to collapse
into single borders, as shown below.
cell one | cell two |
cell three | cell four |
<table border="1" style="border-collapse:collapse;">
<tr><td>cell one</td><td>cell two</td></tr>
<tr><td>cell three</td><td>cell four</td></tr>
</table>
Set the border-collapse property to collapse to collapse the table cell
borders into single borders. Set the border-collapse property to separate
to display each cell with a separate border (double borders). set the border-collapse
property to inherit to indicate that the border-collapse property should be
inherited from the parent element (Internet Explorer does not support the inherit value.
Table Caption
Col1 Title | Col2 Title | Col2 Title |
Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 |
Above, I used a style block rather than in-line style to set the cell cellspacing
by applying the border-collapse property to the table, and the padding
property to the td elements in the table.
<style>
#tbl1
{
border-collapse:collapse;
}
#tbl1 td
{
padding:6px;
}
</style>
<table border=1>
<caption>Table Caption</caption>
<tr><th>Col1 Title</th><th>Col2 Title</th><th>Col2 Title</th></tr>
<tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td><td>Row 1 Col 3</td></tr>
<tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td><td>Row 2 Col 3</td></tr>
<tr><td>Row 3 Col 1</td><td>Row 3 Col 2</td><td>Row 3 Col 3</td></tr>
</table>
More CSS Quick Reference: • Set List Bullets Position • Specifying Color • Set a Fixed Background Image • Use an External Style Sheet • Set the Text Color • Context selectors • Set The Cursor Style • Use an Embedded Style Sheet • Set the Word Spacing • Set an Element's Clipping
|