Javascript Reference - HTML DOM Style borderSpacing Property

The borderSpacing property sets or gets the space between cells in a table.

The borderSpacing property has no effect if borderCollapse is set to collapse.

Browser Support


`borderSpacing`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderSpacing property:

var v = object.style.borderSpacing

Set the borderSpacing property:

object.style.borderSpacing=length length|initial|inherit

Property Values

Value	Description
length length	Set the space between cells in length units. Negative values are not allowed. Default value is 0. If one length value is given, it sets both the horizontal and vertical spacing. If two length values are given, the first sets the horizontal spacing and the second sets the vertical spacing.
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	0
Return Value:	A string representing the space between cells in a table
CSS Version	CSS2

Example

The following code shows how to set the space between cells in a table.


<!DOCTYPE html>
<html>
<body>
<!--   w w  w  .j  a  v a  2  s  .  co m-->
<table id="myTable" border="1">
  <tr><th>Item</th><th>Price</th></tr>
  <tr><td>A</td><td>$1</td></tr>
  <tr><td>B</td><td>$1</td></tr>
</table>
<br>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myTable").style.borderSpacing = "20px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the space between cells in a table.


<!DOCTYPE html>
<html>
<body>
<!-- www  .  ja v a2 s. c  om-->
<table id="myTable" border="1" style="border-spacing:10px;">
  <tr><th>Item</th><th>Price</th></tr>
  <tr><td>A</td><td>$1</td></tr>
  <tr><td>B</td><td>$5</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").style.borderSpacing);
}
</script>

</body>
</html>

The code above is rendered as follows: