CSS Border-Collapse Property
Cascading Style Sheets (CSS) are essential for designing and styling web pages, providing numerous properties to manage the layout and appearance of elements. One important property for table formatting is border-collapse. This property lets developers control how borders between table cells are rendered, which significantly affects the overall look and feel of tabular data.
What is a Border Collaphse in CSS?
The border-collapse property in CSS determines how borders between table cells are managed. It is especially important for HTML tables, where data is organized into rows and columns. By default, each cell in an HTML table has its own border, which can create a more spaced-out look because of the gaps between the borders of individual cells.
The border-collapse property has two primary values: collapse and separate.
Separate: This is the default setting. It keeps borders around each cell separate, with space between them. Each cell has its own distinct border.
Collapse: This setting merges the borders between adjacent cells into one single border. It eliminates the space between borders, giving a neater and more compact look, as adjacent cells share a common border.
How to use Border-Collapse
Applying border-collapse in CSS is quite simple. You can add it to the <table> element or to specific <td> and <th> elements to control how the borders are displayed.
Syntax
table {
border-collapse: collapse;
}
Property Values
separate: This is the default value, which keeps each table cell’s border distinct. With this setting, each cell has its own separate border.
collapse: This setting merges the borders between adjacent cells into a single border. When this option is used, the border-spacing property has no effect.
initial: This sets the property to its default value.
inherit: This makes the property take on the value from its parent element.
Let's look at some examples to understand this CSS property. In the first example, we use the separate value for the border-collapse property. In the second example, we use the collapse value.
Example-Using separate value
With this value, you can use the border-spacing property to adjust the space between adjacent table cells.
<!DOCTYPE html>
<html>
<head>
<title>border-collapse Property</title>
<style>
table {
border: 2px solid blue;
text-align: center;
font-size: 21px;
width: 80%;
height: 50%;
}
th {
border: 5px solid red;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#t1 {
border-collapse: separate;
}
</style>
</head>
<body>
<h1>The border-collapse Property</h1>
<h2>border-collapse: separate;</h2>
<table id="t1">
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Anya</td>
<td>Gosling</td>
<td>Maths</td>
<td>94</td>
</tr>
<tr>
<td>Yar</td>
<td>Rickman</td>
<td>Maths</td>
<td>89</td>
</tr>
<tr>
<td>Twilight</td>
<td>Mendes</td>
<td>Maths</td>
<td>82</td>
</tr>
</table>
</body>
</html>
Output
Example-Using collapse property
The border-spacing and border-radius properties can't be used with this value.
<!DOCTYPE html>
<html>
<head>
<title>border-collapse Property</title>
<style>
table {
border: 2px solid blue;
text-align: center;
font-size: 21px;
width: 80%;
height: 50%;
}
th {
border: 5px solid red;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#t1 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>The border-collapse Property</h1>
<h2>border-collapse: collapse;</h2>
<table id="t1">
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Anya</td>
<td>Gosling</td>
<td>Maths</td>
<td>94</td>
</tr>
<tr>
<td>Yar</td>
<td>Rickman</td>
<td>Maths</td>
<td>89</td>
</tr>
<tr>
<td>Twilight</td>
<td>Mendes</td>
<td>Maths</td>
<td>82</td>
</tr>
</table>
</body>
</html>
Output
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JTP</title>
<link rel="stylesheet" href="styles.css">
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.heading {
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="ak">
<table>
<tr class="heading">
<th>Product</th>
<th>Price</th>
</tr>
<tr class="data">
<td>Laptop</td>
<td>$1000</td>
</tr>
<tr class="data">
<td>Smartphone</td>
<td>$699</td>
</tr>
</table>
</div>
</body>
</html>
Output
In this example, the border-collapse: collapse; property is used on the <table> element. This makes the table's borders merge together, creating a seamless look with no gaps between the cell borders.
Advantages of Border-collapse
Improved Aesthetics: Collapsing table borders gives a cleaner and more organized look, which is especially useful for dense data.
Reduced Space: Collapsing borders eliminates extra gaps, making better use of the available screen space.
Consistent Styling: For complex tables, collapsing borders helps maintain a uniform style across the entire table.
Cell Spacing and Padding
While border-collapse controls how borders between cells are displayed, it's important to understand the difference between cell spacing and padding.
Cell Spacing: This is the space between cells. When border-collapse: separate; is used, you can adjust this space with the border-spacing property, which controls the distance between adjacent cell borders.
Padding: This is the space between the cell content and its border. You can set padding individually for cells using the padding property on <td> and <th> elements.
When border-collapse: collapse; is applied, any spacing set with border-spacing is ignored, and padding becomes the main way to control the space inside cells.
Nested Tables and Border-collapse
In cases with nested tables (tables inside tables), the border-collapse property can influence how borders look. When you use border-collapse: collapse; on a parent table, the child tables also inherit this setting, causing their borders to collapse as well. This creates a smooth, seamless look for the nested tables.
Compatibility and Browser Support
The border-collapse property is supported by most modern browsers. However, it's important to test your tables to ensure they look consistent across different browsers and versions, especially for complex layouts.
Best Practices
Accessibility: When styling tables, make sure that changes from border-collapse don't impact the readability or accessibility of the data, especially for users who rely on assistive technologies.
Testing and Optimization: Regularly test tables with different border-collapse settings, particularly in responsive designs, to ensure they stay consistent and user-friendly on various screen sizes and devices.
Semantic Markup: Use tables only for displaying tabular data. For non-tabular content, consider alternative layouts or CSS frameworks to improve responsiveness and accessibility.
Conclusion
The border-collapse property in CSS is a useful tool for managing how table borders look. It allows developers to choose between having separate or collapsed borders. Using this property effectively can greatly improve the appearance and readability of tables on web pages, making the interface look more polished and user-friendly.
