Welcome to Bucaro TecHelp!

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

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Table border-collapse Property

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 TitleCol2 TitleCol2 Title
Row 1 Col 1Row 1 Col 2Row 1 Col 3
Row 2 Col 1Row 2 Col 2Row 2 Col 3
Row 3 Col 1Row 3 Col 2Row 3 Col 3

Above is a basic html table with no style applied.

Table Caption
Col1 TitleCol2 TitleCol2 Title
Row 1 Col 1Row 1 Col 2Row 1 Col 3
Row 2 Col 1Row 2 Col 2Row 2 Col 3
Row 3 Col 1Row 3 Col 2Row 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 onecell two
cell threecell 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 TitleCol2 TitleCol2 Title
Row 1 Col 1Row 1 Col 2Row 1 Col 3
Row 2 Col 1Row 2 Col 2Row 2 Col 3
Row 3 Col 1Row 3 Col 2Row 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:
• Descendant Selector
• Set the Border Color
• Grouped Selectors
• Set a Background Image's Position
• Set the Font Variant
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Set the Font Slant
• Context selectors
• Set the Text Color
• Set the Font Style

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2019 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268