CSS Home
CSS Reference
Pseudo Classes & Elements
© 2011 TutorialsPoint.COM
|
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
|
|
|