HTML - DOM Style Object borderSpacing Property

Quiz

HTML DOM Style Object borderSpacing property sets or returns the space between cells in table. If borderCollapse property is set to 'collapse', then borderSpacing property has no effect.

Syntax

Set the borderSpacing property:

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

Get the borderSpacing property:

object.style.borderSpacing;

Property Values

Value	Description
length	It specifies the space between cells. If two values are specified, first value sets the horizontal spacing while second value sets the vertical spacing. If only one value is specified, it sets both horizontal and vertical spacing. It's default value is 0.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents space between border cells.

Examples of HTML DOM Style Object 'borderSpacing' Property

Set Border Spacing

The following example uses single value of border spacing to set the space between cells.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderSpacing Property
    </title>
    <style>
        table {
            border: aqua 2px solid;
            border-collapse: separate;
        }
    </style>
</head>
<body>
    <p></p>
    <button onclick="fun()">Add</button>
    <br><br><br><br>
    <table id="border" border="1">
        <tr>
            <td>This is</td>
            <td>is</td>
        </tr>
        <tr>
            <td>an example</td>
            <td>table</td>
        </tr>
        <tr>
            <td>for</td>
            <td>collapse</td>
        </tr>
    </table>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderSpacing = "10px";
        }
    </script>
</body>
</html>

Set Horizontal and Vertical Border Spacing

The following example uses two values of border spacing to set the space between cells where first value sets horizontal and second value sets vertical space between cells.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderSpacing Property
    </title>
    <style>
        table {
            border: aqua 2px solid;
            border-collapse: separate;
        }
    </style>
</head>
<body>
    <p></p>
    <button onclick="fun()">Add</button>
    <br><br><br><br>
    <table id="border" border="1">
        <tr>
            <td>This is</td>
            <td>is</td>
        </tr>
        <tr>
            <td>an example</td>
            <td>table</td>
        </tr>
        <tr>
            <td>for</td>
            <td>collapse</td>
        </tr>
    </table>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderSpacing = "10px 30px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderSpacing	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page