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.
<!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.
<!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.
<!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.
<!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
- Internet Explorer 9.0
- Firefox
- Opera
- Safari