Open In App

HTML | DOM Style borderSpacing Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Style borderSpacing Property is used to set or return the spacing between the cells in a table

Syntax:

  • To get the borderSpacing property
object.style.borderSpacing
  • To set the borderSpacing property
object.style.borderSpacing = "length | initial | inherit"

Return Values: It returns a string value, that represents the space between cells in a table.

Property Values

  • length: This is used to specify the length between in the cells in fixed units. Negative values are not allowed. The default value is 0.
  • initial: This is used to set the property to its default value.
  • inherit: This is used to inherit the value from the element’s parent.

Some examples demonstrating these values are shown below: 

Example-1: Using one value to specify both the horizontal and vertical spacing together. 

html




<!DOCTYPE html>
<html>
<head>
    <title>DOM Style BorderSpacing</title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style BorderSpacing</b>
 
    <table id="table" border="1">
        <tr>
            <th>Author</th>
            <th>Articles</th>
        </tr>
        <tr>
            <td>John</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Rony</td>
            <td>230</td>
        </tr>
    </table>
    <br>
 
    <button type="button" onclick="changeSpacing()">
      Change border spacing
    </button>
 
    <script>
        function changeSpacing() {
            elem = document.querySelector("#table");
 
            // setting the border spacing
            elem.style.borderSpacing = "10px";
        }
    </script>
 
</body>
 
</html>


Output: 

Before clicking the button:

 before 

After clicking the button:

 single-after 

Example-2: Using two values to specify the horizontal and vertical spacing separately. 

html




<!DOCTYPE html>
<html>
<head>
    <title>DOM Style BorderSpacing</title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style BorderSpacing</b>
 
    <table id="table" border="1">
        <tr>
            <th>Author</th>
            <th>Articles</th>
        </tr>
        <tr>
            <td>John</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Rony</td>
            <td>230</td>
        </tr>
    </table>
    <br>
 
    <button type="button" onclick="changeSpacing()">
      Change border spacing
    </button>
 
    <script>
        function changeSpacing() {
            elem = document.querySelector("#table");
 
            // setting the border spacing
            elem.style.borderSpacing = "20px 5px";
        }
    </script>
 
</body>
 
</html>


Output: 

Before clicking the button:

 before 

After clicking the button:

 double-val-after 

Example-3: Using the initial value. 

html




<!DOCTYPE html>
<html>
<head>
    <title>DOM Style BorderSpacing</title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style BorderSpacing</b>
 
    <table id="table" border="1">
        <tr>
            <th>Author</th>
            <th>Articles</th>
        </tr>
        <tr>
            <td>John</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Rony</td>
            <td>230</td>
        </tr>
    </table>
    <br>
 
    <button type="button" onclick="changeSpacing()">
      Change border spacing
    </button>
 
    <script>
        function changeSpacing() {
            elem = document.querySelector("#table");
 
            // setting the border spacing
            elem.style.borderSpacing = "initial";
        }
    </script>
 
</body>
 
</html>


Output: 

Before clicking the button:

 before 

After clicking the button:

 initial-after 

Example-4: Using the inherit value. 

html




<!DOCTYPE html>
<html>
<head>
    <title>DOM Style BorderSpacing</title>
    <style>
 
         /* setting the border spacing of the parent */
        #parent {
                border-spacing: 10px;
         }
    </style>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style BorderSpacing</b>
    <div id="parent">
        <table id="table" border="1">
            <tr>
                <th>Author</th>
                <th>Articles</th>
            </tr>
            <tr>
                <td>John</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Rony</td>
                <td>230</td>
            </tr>
        </table>
    </div>
    <br>
 
    <button type="button" onclick="changeSpacing()">
      Change border spacing
    </button>
 
    <script>
        function changeSpacing() {
            elem = document.querySelector("#table");
 
            // setting the border spacing
            elem.style.borderSpacing = "inherit";
        }
    </script>
 
</body>
 
</html>


Output: 

Before clicking the button:

 before 

After clicking the button:

 inherit-after 

Supported Browsers: The browser supported by borderSpacing Property are listed below:

  • Chrome 1
  • Edge 12
  • Internet Explorer 8
  • Firefox 1
  • Opera 4
  • Safari 1


Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads