CSS border-spacing
This CSS border-spacing property is used to set the distance between the borders of the adjacent cells in the table. It can be provided as one or two values for determining the vertical and horizontal spacing.
- Only one value is specified, then it sets both horizontal spacing and vertical spacing.
- When we use the two-value syntax, then the first one is used to set the horizontal spacing (space between the adjacent columns), and the second value sets the vertical spacing (space between the adjacent rows).
Syntax:
border-spacing: length | initial | inherit;
Property Values:
length: This value sets the distance between the borders of the adjacent table cells in px, cm, pt, etc. Negative values are not allowed.
initial: Sets the property to its default value.
inherit: The property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: #cc0066;
}
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> Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> Name1</td>
<td> Maths </td>
<td> 42 </td>
</tr>
<tr>
<td> Name2</td>
<td> Maths </td>
<td> 59 </td>
</tr>
<tr>
<td> Name3</td>
<td> Maths </td>
<td> 72 </td>
</tr>
</table>
</body>
</html>
OUTPUT:
Example:
<!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> Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> Name1 </td>
<td> Maths </td>
<td> 32 </td>
</tr>
<tr>
<td> Name2 </td>
<td> Maths </td>
<td> 59 </td>
</tr>
<tr>
<td> Name3 </td>
<td> Maths </td>
<td> 72 </td>
</tr>
</table>
</body>
</html>
OUTPUT:
We are using two values of the CSS border-spacing property. The CSS border-collapse property is set to separate, and the value of the CSS border-spacing is set to 20pt 1em. The first value, i.e., 20pt sets the horizontal spacing, and the value 1em fix the vertical spacing.