CSS Border-collapse Property

Cascading Style Sheets (CSS) play a pivotal role in designing and styling web pages, offering a myriad of properties to control the layout and appearance of elements. One such property that holds significance in table formatting and design is border collapse. This property allows developers to control the rendering of borders between table cells and significantly influences the overall look and feel of tabular data.

What is a Border Collapse in CSS?

Border-collapse is a CSS property that defines how borders between table cells are handled. It's particularly relevant in HTML tables, where rows and columns are structured to display data. By default, HTML tables have a separate border for each cell, which may result in a more spaced-out appearance due to the gaps between individual cell borders.

The border-collapse property provides two main values: collapse and separation.

Separate: This is the default value for the property. It creates separate borders for each cell, leaving space between adjoining borders. Each cell maintains its distinct border.
Collapse: This value collapses the borders between adjoining cells into a single border. It removes the space between cell borders, resulting in a cleaner and more compact appearance. Adjacent cells share borders, appearing as a single line.

How to Use Border-collapse

Implementing border collapse in CSS is relatively straightforward. It's applied to the <table> element or to specific <td> and <th> elements within the table to control the border rendering behavior.

Syntax:

 table {
            border-collapse: collapse;
        }

The values of this CSS property are defined as follows.

Property Values

separate: It is the default value that separates the border of the table cell. Using this value, each cell will display its own border.

collapse: This value is used to collapse the borders into a single border. Using this, two adjacent table cells will share a border. When this value is applied, the border-spacing property does not affect.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's understand this CSS property by using some examples. In the first example, we are using the separate value of the border-collapse property. In the second example, we are using the collapse value of the border-collapse property.

Example - Using separate value

With this value, we can use the border-spacing property to set the distance between the adjacent table cells.

<!DOCTYPE html>
<html>

<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
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> 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

Example - Using collapse property

The border-spacing and border-radius properties cannot 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: 20px;
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> 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

Example:

Code:

<!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="wrapper">
        <table>
            <tr class="heading">
                <th>Product</th>
                <th>Price</th>
            </tr>
            <tr class="data">
                <td>Laptop</td>
                <td>$999</td>
            </tr>
            <tr class="data">
                <td>Smartphone</td>
                <td>$599</td>
            </tr>
        </table>
    </div>
</body>

</html>

Output

In this example, the border-collapse: collapse; property is applied to the <table> element. The table will be rendered with collapsed borders, resulting in a seamless appearance with no gaps between cell borders.

Advantages of Border-collapse

Improved Aesthetics: Collapsing table borders creates a neater and more organized layout, especially when dealing with dense tabular data.
Reduced Space: Collapsing borders reduce unnecessary spacing, optimizing the use of available screen real estate.
Consistent Styling: When designing complex tables, collapsing borders can aid in maintaining a consistent style throughout the table structure.

Cell Spacing and Padding:

While border-collapse manages the visibility of borders between cells, it's essential to distinguish between cell spacing and padding.

Cell Spacing: Refers to the space between cells. In border-collapse: separate; mode, the spacing between cells can be adjusted using the border-spacing property. It controls the distance between adjacent cell borders.
Padding: Represents the space between the content of a cell and its border. Padding can be set individually for cells using the padding property for <td> and <th> elements.
When border-collapse: collapse; is used, any cell spacing declared using border-spacing is ignored, and padding values become more critical for controlling the space within cells.

Nested Tables and Border-collapse

In situations involving nested tables (tables within tables), the border-collapse property can affect the visual hierarchy and appearance of borders. When applying border-collapse: collapse; to a parent table, the child tables inherit this behaviour, resulting in their borders collapsing as well. This can create a visually seamless integration of nested tables.

Compatibility and Browser Support

The border-collapse property is well-supported across modern browsers. However, it's essential to test and ensure consistent rendering across different browsers and versions, especially when dealing with complex table layouts.

Best Practices

Accessibility: While styling tables, ensure that the visual changes introduced by border-collapse do not affect the readability or accessibility of tabular data, particularly for users relying on assistive technologies.
Testing and Optimization: Regularly test tables with different border-collapse values, especially in responsive designs, to ensure the table layout remains consistent and user-friendly across various screen sizes and devices.
Semantic Markup: Use tables appropriately for tabular data and consider alternative layouts or CSS frameworks for non-tabular content to enhance responsiveness and accessibility.

Conclusion

The border-collapse property in CSS is a valuable tool for controlling the appearance of table borders, offering developers the flexibility to choose between separated or collapsed borders. Understanding and utilizing this property efficiently can significantly enhance the visual appeal and readability of tables within web pages, contributing to a more polished and user-friendly interface.

Next TopicCSS border-spacing

← prev next →