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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
09 Aug, 2022
Like Article
Save Article