CSS Properties; CSS Border-Collapse and Border-Spacing
CSS Border-Collapse
In CSS, border-collapse specifies whether table cells share a separate or common border and how they will be arranged.
This property has two values; separate and collapse. When set to the first value (separate), the distance between the cells can be defined using the border-spacing property. The border-collapse property is set to collapse, so the inset value of the border-style property behaves like a groove, and the outset value behaves like a ridge.
The values of this CSS border-collapse are described below.
Property Values
Separate: This is the base value that divides the borders of a table cell. Due to this value, each cell will have its border displayed.
Collapse: This is used to crumple the borders into one border. When you use this, two adjacent table cells will begin to share a border, and the border-spacing property is not affected.
Initial: This returns the property to its base value.
Inherit: This inherits the property from its source.
To further understand this CSS property, observe the following examples. In the first example, we use the border-collapse property's separate value. In the second example, we use the border-collapse property's collapse value.
Example - Using Separate Value
Using this value, we can then use the border-spacing property to fix the distance between adjacent table cells.
<!DOCTYPE html>
<html>
<head>
<title> border-collapse property example </title>
<style>
table{
border: 2px solid green;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid pink;
background-color: white;
}
td{
border: 5px solid orange;
background-color: purple;
}
#t1 {
border-collapse: separate;
}
</style>
</head>
<body>
<h1> The border-collapse Property Example </h1>
<h2> border-collapse: separate; example </h2>
<table id = "t1">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> Faith </td>
<td> Anderson </td>
<td> Maths </td>
<td> 72 </td>
</tr>
<tr>
<td> Andrew </td>
<td> Peterson </td>
<td> Maths </td>
<td> 69 </td>
</tr>
<tr>
<td> Isaiah </td>
<td> Ofomhe </td>
<td> Maths </td>
<td> 95 </td>
</tr>
</table>
</body>
</html>
Example - Using collapse property
Border-spacing and border-radius properties can not be used with this collapse property.
<!DOCTYPE html>
<html>
<head>
<title> border-collapse property example</title>
<style>
table{
border: 2px solid green;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid pink;
background-color: white;
}
td{
border: 5px solid orange;
background-color: purple;
}
#t1{
border-collapse: collapse;
}
</style>
</head>
<body>
<h1> The border-collapse Property Example </h1>
<h2> border-collapse: collapse; example </h2>
<table id = "t1">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> Faith </td>
<td> Anderson </td>
<td> Maths </td>
<td> 72 </td>
</tr>
<tr>
<td> Andrew </td>
<td> Peterson </td>
<td> Maths </td>
<td> 69 </td>
</tr>
<tr>
<td> Isaiah </td>
<td> Ofomhe </td>
<td> Maths </td>
<td> 95 </td>
</tr>
</table>
</body>
</html>
CSS Border-Spacing Property
In CSS, the border-spacing property is used to specify the distance between the borders of adjacent cells in a table. It is applicable when the border-collapse property is positioned to a separate value. However, there will not be any space between borders of the border-collapse that is placed to the collapse value.
It is defined by one or two values for determining the vertical and horizontal spacing. When we use the two-value syntax, the first value indicates the horizontal spacing (i.e., the space between adjacent columns), and the second value indicates the vertical spacing (i.e., the space between adjacent rows). When only one value is provided then it sets horizontal and vertical spacing.
Property Values
The values of this CSS border-collapse property are described below.
Length: This defines the distance between the borders of adjacent table cells in px, cm, pt, etc. Negative values are not defined.
Initial: This returns the property to its base value.
Inherit: This inherits the property from its origin element.
To further understand this CSS border-spacing property observe the following examples. In the first example, we use the single value of the border-spacing property, and in the second example, we use two values.
Example - Using Single Value
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property example </title>
<style>
table{
border: 2px solid green;
text-align: center;
font-size: 20px;
background-color: pink;
}
th{
border: 5px solid blue;
background-color: white;
}
td{
border: 5px solid orange;
background-color: purple;
}
#space{
border-collapse: separate;
border-spacing: 45px;
}
</style>
</head>
<body>
<h1> The border-spacing Property Example </h1>
<h2> border-spacing example: 45px; </h2>
<table id = "space">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> Faith </td>
<td> Anderson </td>
<td> Maths </td>
<td> 72 </td>
</tr>
<tr>
<td> Andrew </td>
<td> Peterson </td>
<td> Maths </td>
<td> 69 </td>
</tr>
<tr>
<td> Isaiah </td>
<td> Ofomhe </td>
<td> Maths </td>
<td> 95 </td>
</tr>
</table>
</body>
</html>
Example - Using Two Values
Since we are using two values of the border-spacing property, the border-collapse property is fixed to a separate value, and the value of the border-spacing is specified to 20pt 1em. The first value, 20pt, sets the horizontal spacing, and the value 1em sets the vertical spacing.
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property example </title>
<style>
table{
border: 2px solid green;
text-align: center;
font-size: 20px;
background-color: pink;
}
th{
border: 5px solid blue;
background-color: white;
}
td{
border: 5px solid orange;
background-color: purple;
}
#space{
border-collapse: separate;
border-spacing: 20pt 1em;
}
</style>
</head>
<body>
<h1> The border-spacing Property Example </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> Faith </td>
<td> Anderson </td>
<td> Maths </td>
<td> 72 </td>
</tr>
<tr>
<td> Andrew </td>
<td> Peterson </td>
<td> Maths </td>
<td> 69 </td>
</tr>
<tr>
<td> Isaiah </td>
<td> Ofomhe </td>
<td> Maths </td>
<td> 95 </td>
</tr>
</table>
</body>
</html>
