This CSS attribute is employed to specify the spacing between the borders of adjacent cells within a table. It only takes effect when the border-collapse attribute is set to separate. When border-collapse is set to collapse, there will be no gap between the borders.
It can be described as a pair of values used to determine the vertical and horizontal spacing.
When only one value is specified, it establishes spacing in both the horizontal and vertical directions.
When employing the two-value punctuation, the initial one establishes the horizontal gap between adjacent columns, while the second one determines the vertical space between nearby rows.
Syntax
border-spacing: length | initial | inherit;
Property Values
The values of this CSS property are defined as follows.
- length: Determines the distance between the borders in pixels, centimeters, focuses, and so on. Negative values are not permitted.
- initial: Sets the property to its default value.
- inherit: Inherits the property from its parent component.
Let's explore this CSS attribute through practical illustrations. The initial demonstration showcases the application of a singular value for the border-spacing attribute, while the subsequent demonstration exhibits the utilization of a pair of values for the border-spacing attribute.
Single Value Example
In this instance, the border-spacing is adjusted to 45 pixels individually, ensuring uniform spacing horizontally and vertically among the table cells. Modify the measurements according to your design preferences. This demonstration illustrates how the border-spacing attribute enhances the visual presentation of tables. Customize the values based on your specific design requirements.
Code:
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#space{
border-collapse: separate;
border-spacing: 45px;
}
</style>
</head>
<body>
<h1> The border-spacing Property </h1>
<h2> border-spacing: 45px; </h2>
<table id = "space">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html>
Output
Two Values Example
Here, we are using two measurements of the border-spacing attribute. The border-collapse attribute is configured as separate, with the measurement of the border-spacing set as 20pt 1em. The initial measurement, 20pt, defines the horizontal spacing, while the measurement 1em defines the vertical spacing. This instance demonstrates the enhancement of table visual presentation through the utilization of the border-spacing attribute. Customize the measurements according to your specific design requirements.
Code:
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#space{
border-collapse: separate;
border-spacing: 20pt 1em;
}
</style>
</head>
<body>
<h1> The border-spacing Property </h1>
<h2> border-spacing: 20pt 1em; </h2>
<table id = "space">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html>
Output
Browser Compatibility
The border-spacing attribute is typically supported in modern browsers such as Chrome, Firefox, Safari, and Edge. However, it is advisable to verify compatibility on specific platforms to ensure a consistent user experience in various browser environments.
Conclusion
In summary, the CSS border-spacing attribute proves invaluable in managing the gaps between borders of adjacent cells within a table. Whether applying a single value for consistent spacing or two values for distinct horizontal and vertical spacings, this attribute enhances the aesthetic appeal of tables in web design. Familiarizing oneself with its syntax, property values, and practical illustrations empowers designers to fine-tune the layout and presentation of data with precision.