In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > borderSpacing

borderSpacing style property

Browser support:

8

Specifies or returns the space between cells in a table.

This property has no effect if the borderCollapse property is set to collapse.

Note: The borderSpacing property is supported in Internet Explorer from version 8.

Syntax:

object.borderSpacing;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: border-spacing

Possible values:

The type of this property is string.

One of the following values:

•

Values in this order (use the space character to separate them):

possible but not necessary; left to personal choice

•

inherit

Description of values:

horizontal space in non-negative length

The horizontal space between cells in length units. For the supported length units, see the length page.

inherit

Takes the value of this property from the computed style of the parent element.

vertical space in non-negative length

The vertical space between cells in length units. For the supported length units, see the length page.

Default: 0.

If only one length value is specified, it affects both the horizontal and vertical spacing.

Example HTML code 1:

This example illustrates the use of the border-spacing property:

<head>
    <style>
        .spacing0 {
            border-spacing: 0px;
        }
        .spacing0 td {
            border: 1px solid blue;
        }
        .spacing15 {
            border-spacing: 15px;
        }
        .spacing15 td {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    Table with spacing 0px
    <table class="spacing0">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
    <br /><br />
    Table with spacing 15px
    <table class="spacing15">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the borderSpacing property in JavaScript:

<head>
    <style>
        .example {
            border: 1px solid blue;
        }
    </style>

    <script type="text/javascript">
        function ChangeBorder (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var table = document.getElementById ("myTable");

            if ('borderSpacing' in table.style) {
                table.style.borderSpacing = selectState;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <table id="myTable">
        <tr>
            <td class="example">Apple</td>
            <td class="example">13.46</td>
        </tr>
        <tr>
            <td class="example">Pear</td>
            <td class="example">35.21</td>
        </tr>
        <tr>
            <td class="example">Peach</td>
            <td class="example">23.12</td>
        </tr>
    </table>

    <select onchange="ChangeBorder (this);" size="5">
        <option selected="selected" />0
        <option />3px
        <option />8px
        <option />15px
        <option />24px
    </select>
</body>