CSS - Tables

[Hasan]

The border-spacing Property:
The border-spacing property specifies the distance that separates adjacent cells. borders. It can take either one or two values; these should be units of length.

If you provide one value it will applies to both vertical and horizontal borders Or you can specify two values, in which case the first refers to the horizontal spacing and the second to the vertical spacing:

NOTE: Unfortunately, this property does not work in Netscape 7 or IE 6.

CSS
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}

Now let's modify previous example and see the effect:

CSS:

table.one {
border-collapseeparate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapseeparate;
width:400px;
border-spacing:10px 50px;
}
HTML:

<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>