HTML | DOM Style borderSpacing Property
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:
After clicking the button:
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:
After clicking the button:
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:
After clicking the button:
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:
After clicking the button:
Supported Browsers: The browser supported by borderSpacing Property are listed below:
- Chrome 1
- Edge 12
- Internet Explorer 8
- Firefox 1
- Opera 4
- Safari 1
Please Login to comment...