Border-Collapse in HTML
How can We Use HTML to Make a Collapsed Border?
To generate a collapsed border in HTML, we utilize the border-collapse attribute. A CSS property called border-collapse specifies whether the table borders in HTML should be separated by their border or collapsed into a single border.
Introduction
Whether the table cells have a shared border or a distinct border is determined by the CSS border-collapse property.
The CSS border-collapse property has two primary values: separate and collapse. The border-spacing property may be used to find the gap between cells by setting it to separate. When the border-style property is set to collapse, inset values behave like grooves, and outset values act like ridges.
Syntax:
The CSS border-collapse property's syntax is displayed below:
border-collapse: separate|collapse;
CSS Border-Collapse
The border-collapse property in CSS controls how the table borders are shown, which has an impact on the table's design.
/Keyword values //
border-collapse: collapse;
border-collapse: separate;
//Global values //
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: unset;
A deeper look at the keyword values is provided here.
The CSS border-collapse property has several keyword values. These break apart and collapse, establishing whether the borders of the cells will be shared or distinct.
Separate (by default)
Borders are maintained by establishing separate values. A unique border encircles every cell, and the corners and boundaries of each cell do not overlap.
If you remove the padding, the border may contact the text, and the cell may fill with text when using a distinct value. The th or td padding will enlarge the cells and broaden the table.
Adding padding inside the border might improve its appearance.
This attribute has a default value, so we don't need to use it if we want distinct boundaries. We may obtain a different border on every cell by using the border property on our th and td.
Note: It should be noted that borders cannot be applied to rows, columns, row groups, or column groups; they can only be added to table cells. Note that we cannot use this attribute in td or th. It needs to be included in the set of table rules.
Collapse
If the CSS table border-collapse attribute is set to collapse, all borders will meet. You can see in the table now that the borders of two neighboring cells match. Borders can also be applied to cells, rows, and columns. To examine the impacts, you may adjust the padding and margin using the border-collapse property.
It should be noted that attributes like border spacing and border radius (on real borders) have no effect when a border collapses. If you require one of those items, you'll need border-collapse: separate.
Let's now examine the Global values in more detail. For every attribute, four possible values may be utilized with border-collapse. Since they will each have a distinct effect, let's examine how they all function.
Initial
Utilizing the initial value indicates that we are utilizing the separate default value for the property. Since we are utilizing the default value, we won't see any additional consequences when we utilize the initial value. For this CSS border-collapse property, we may utilize the original value if we used the collapse value and now want the default value. These types of situations make them useful.
Inherit
The inherited property allows us to define the precise value of the attribute's parent element. We can use this value to inherit the parent's border and border-collapse property stylings and values.
Revert
The value will be reversed when the revert value is applied, and the new value will either be the browser's default value or its intrinsic value.
Unset
The unset value can be used to delete a property's declared value. This property eliminates our declared property, which may be the collapse value if we utilize it in our code.
Considering the Value Collapse
The table's boundaries are just collapsed into one border if we pass collapse as a value for the border-collapse property. The HTML syntax to generate a collapsed border is as follows.
border-collapse: collapse;
Example 1: We are attempting to construct a collapsed border in HTML in the example shown below.
<html>
<head>
<style>
table,
tr,
th,
td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Example for border-collapse in HTML</h2>
<table style="width: 50%">
<tr>
<th>Name </th>
<th>Roll No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>PQR</td>
<td>456</td>
</tr>
</table>
</body>
</html>
Output
Using the Initial Value
The border-collapse Property is set to separate, which is its default value if the initial is sent in as a value. The HTML syntax that makes use of the border-collapse property's initial attribute is as follows.
border-collapse:initial;
Example
An example using the initial attribute of the HTML border-collapse property is provided below.
<html>
<head>
<style>
table,tr,th,td {
border:2px solid black;
border-collapse:initial;
}
</style>
</head>
<body>
<h3>Example for border-collapse in HTML</h3>
<table style="width: 50%">
<tr>
<th >Name </th>
<th>Section</th>
</tr>
<tr>
<td >Priya</td>
<td >D</td>
</tr>
<tr>
<td >Dev</td>
<td >A</td>
</tr>
</table>
</body>
</html>
Output
A Vivid Table of Students
Below is an example of a CSS border value collapse showing a vibrant student table.
<html>
<head>
<title>Example for Border Collapse</title>
<style>
table {
border-spacing: 1px;
margin: 4px auto;
}
td {
padding: 1px 1.2px;
border-radius: 7px;
border: 2px solid blue;
}
#border-separate-ex:checked ~ table {
border-collapse: separate;
}
#border-collapse-ex:checked ~ table {
border-collapse: collapse;
}
body {
text-align: center;
}
input {
margin-right: 30px;
}
</style>
</head>
<body>
<label for="border-separate-ex">Separate</label>
<input
name="border-behavior-ex"
type="radio"
id="border-separate-ex"
checked
/>
<label for="border-collapse-ex">Collapse</label>
<input name="border-behavior-ex" type="radio" id="border-collapse-ex" />
<h2>Example for Border Collapse Property</h2>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
</tr>
<tr>
<td>Priya</td>
<td>123</td>
</tr>
<tr>
<td>Arun</td>
<td>234</td>
</tr>
<tr>
<td>Dev</td>
<td>345</td>
</tr>
<tr>
<td>Sonia</td>
<td>456</td>
</tr>
</table>
</body>
</html>
Output
Explanation
In this example, we have used a table element, <td>, and <th> tags to construct a table of common browsers. Here, we have employed both distinct properties and collapse. To symbolize the separate and collapse boundaries, I have included two radio buttons. By selecting the radio buttons, the user may view the desired border type. To make our table seem better, I have also introduced CSS attributes.
1. When a separate radio button is chosen
2. When the radio button for collapse is chosen
Conclusion
- The border-collapse property in CSS determines the border of the cells inside the table and indicates if they will share a common border.
- There are two keyword values in it: separate and collapse.
- When feasible, boundaries can be collapsed into a single boundary by utilizing the collapse keyword.
- To ensure that every cell shows its boundary, the boundaries are divided using the separate keyword.
- Separate is the default value that is set for it.
- We may take advantage of this feature to split or collapse a table.