CSS - border-spacing

Description:

border-spacing sets the distance between cells in a table, assuming that the table is rendered using the separate-borders model.

Possible Values:

length: Any length unit. If two values are declared, the first applies to spacing along the horizontal axis, and the second applies to the vertical axis.

Applies to:

elements with a display of table or inline-table.

DOM Syntax:

object.style.borderSpacing="2px";

Example:

Here is the example to show usage of border-spacing:

NOTE: This property does not work in IE 6 or NS 7.

<style type="text/css">
table.one {
   border-collapse:separate;
   width:400px;
   border-spacing:10px;
}
table.two {
   border-collapse:separate;
   width:400px;
   border-spacing:10px 50px;
}
</style>
<table class="one" border="1">

<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>

</table>
<br />
<table class="two" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>

<tr><td> Cell B Separate Example</td></tr>
</table>

This will produce following result:

Separate Border Example with border-spacing
Cell A Collapse Example
Cell B Collapse Example

Separate Border Example with border-spacing
Cell A Separate Example
Cell B Separate Example

To Become more comfortable - Do Online Practice