How to Create a Collapsed Border in HTML ?

Last Updated : 15 Mar, 2024

The border-collapse is a Property in CSS that is used to set the table borders. It should collapse into a single border or be separated from its border in HTML.

Syntax:

border-collapse: separate|collapse|initial|inherit;

Properties:

separate: This property is used to set a separate border of a cell. This is the default property.
collapse: This property is used to collapse adjacent cells and make a common border.
initial: This property is used to set the border-collapse property to its default value.
inherit: This property is used when border-collapse property inherits from its parent elements.

Example 1: To demonstrate collapsed table border using separate.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        td,
        th {
            border: 1px solid blue;
        }

        #separateTable {
            border-collapse: separate;
            border-spacing: 5px;
        }
    </style>
</head>

<body>
    <center>
        <h2>
            border-collapse: separate
        </h2>

        <table id="separateTable">
            <tr>
                <th>Name</th>
                <th>Season</th>
                <th>Cost</th>
            </tr>
            <tr>
                <td>Apple</td>
                <td>Winter</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Mango</td>
                <td>Summer</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>All</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Grapes</td>
                <td>Rainy</td>
                <td>100</td>
            </tr>
        </table>
    </center>
</body>

</html>

Output:

separate collapse table border

Example 2: To demonstrate table border-collapse using collapse.

HTML

<!DOCTYPE html>
<html>

<head>

    <style>
        table,
        td,
        th {
            border: 1px solid blue;
        }

        #collapseTable {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <center>
        <h2>
            border-collapse: collapse
        </h2>

        <table id="collapseTable">
            <tr>
                <th>Name</th>
                <th>Season</th>
                <th>Cost</th>
            </tr>
            <tr>
                <td>Apple</td>
                <td>Winter</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Mango</td>
                <td>Summer</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>All</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Grapes</td>
                <td>Rainy</td>
                <td>100</td>
            </tr>
        </table>
    </center>
</body>

</html>