Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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:
• Context selectors
• Use Image for List Item Bullets
• Set the Border Style
• Set the Font Properties
• Set a Background Image's Position
• Set an Element's Margin
• Set the Border Properties
• Class Selector
• Set an Element's Float
• Set the Text Alignment