## Style borderSpacing Property
The `borderSpacing` property sets or returns the distance between the borders of adjacent table cells.
This property corresponds directly to the CSS `border-spacing` property.
---
## Quick Example
Set the spacing between table cells to 20 pixels:
```javascript
document.getElementById("myTable").style.borderSpacing = "20px";
```
---
## Definition and Usage
The `borderSpacing` property specifies the distance between the borders of adjacent cells in a table.
* **Note:** This property only has an effect when the `borderCollapse` property is set to `separate` (which is the default browser behavior). If `borderCollapse` is set to `collapse`, the `borderSpacing` property is ignored.
---
## Syntax
### Return the borderSpacing property:
```javascript
let spacing = object.style.borderSpacing;
```
### Set the borderSpacing property:
```javascript
object.style.borderSpacing = "length length | initial | inherit";
```
---
## Property Values
| Value | Description |
| :--- | :--- |
| *length length* | Specifies the distance between cells using CSS length units (e.g., `px`, `em`, `cm`). Negative values are not allowed. Default is `0`.
• **One value:** Sets both horizontal and vertical spacing. • **Two values:** The first value sets the horizontal spacing, and the second value sets the vertical spacing. |
| `initial` | Resets the property to its default value (`0`). |
| `inherit` | Inherits the property from its parent element. |
---
## Technical Details
| Feature | Specification |
| :--- | :--- |
| **Default Value** | `0` |
| **Return Value** | A String representing the distance between table cells. |
| **CSS Version** | CSS2 |
---
## Browser Support
The `borderSpacing` property is supported by all modern web browsers.
* **Note for older browsers:** Internet Explorer 7 and earlier versions do not support the `borderSpacing` property. Internet Explorer 8 requires a valid `` declaration to support it. Full native support is available from Internet Explorer 9 onwards.
---
## Practical Examples
### Example 1: Setting Cell Spacing Dynamically
This example changes the cell spacing of a table to `15px` horizontally and `30px` vertically when a button is clicked.
```html
Cell A
Cell B
Cell C
Cell D
```
### Example 2: Reading the Current Spacing Value
This example retrieves and alerts the current `borderSpacing` value of a table.
```javascript
let currentSpacing = document.getElementById("myTable").style.borderSpacing;
alert("Current border spacing: " + currentSpacing);
```
---
## Related Pages
* **CSS Tutorial:** (https://www.w3schools.com/css/css_table.asp)
* **CSS Reference:** (https://www.w3schools.com/cssref/pr_border-spacing.php)
* **JavaScript Reference:** (prop-style-bordercollapse.html)
YouTip