CSS - border-collapse

Description:

border-collapse determines the border model used in the rendering of a table.

Possible Values:

collapse: Borders are collapsed to make a single border. Two adjacent cells will share a border.
separate: Borders are separated. Every cell has its own border, and none of these borders are shared with other cells in the table

Applies to:

Elements with a display of table or inline-table.

DOM Syntax:

object.style.borderCollapse="Any of the two values";

Example:

Following is the example to show both values:

<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
      border-style:dotted; 
      border-width:3px; 
      border-color:#000000; 
      padding: 10px;
}
td.b {border-style:solid; 
      border-width:3px; 
      border-color:#333333; 
      padding:10px;
}
</style>

<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>

</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>

<tr><td class="b"> Cell B Separate Example</td></tr>
</table>

This will produce following result:

Collapse Border Example
Cell A Collapse Example
Cell B Collapse Example

Separate Border Example
Cell A Separate Example
Cell B Separate Example

To Become more comfortable - Do Online Practice