Collapsed Table Borders

To prevent the appearance of double borders in a table, you can use the CSS property ‘border-collapse’ and set it to “collapse.” By doing so, the borders within the table will merge into a single border, providing a cleaner and more unified visual presentation.

Syntax:

table, th, td {
  border-collapse: collapse; 
}

Example: The implementation of collapsed border around a table with an example.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML table border Attribute
    </title>
    <style>
        body {
            text-align: center;
        }
 
        table {
            margin: 0 auto;
            height: 20vh;
            width: 40vh;
        }
 
        table,
        th,
        td {
            border-collapse: collapse;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h2>HTML table border Attribute</h2>
 
    <table border="1">
        <caption>
            Author Details
        </caption>
 
        <tr>
            <th>NAME</th>
            <th>AGE</th>
            <th>BRANCH</th>
        </tr>
        <tr>
            <td>BITTU</td>
            <td>22</td>
            <td>CSE</td>
        </tr>
        <tr>
            <td>RAM</td>
            <td>21</td>
            <td>ECE</td>
        </tr>
    </table>
</body>
 
</html>


Output:

HTML border Attribute

The HTML <table> border Attribute is used to specify the border of a table. It sets the border around the table cells. This attribute defines the visual presentation of the table by setting the thickness of the borders. A higher value results in a thicker border. Alternatively, setting the border attribute to “0” removes the borders entirely.

Note: The border attribute is not supported by HTML5.

Similar Reads

Syntax:

...

Attribute Values:

...

Collapsed Table Borders

...

Round Table Borders

To prevent the appearance of double borders in a table, you can use the CSS property ‘border-collapse’ and set it to “collapse.” By doing so, the borders within the table will merge into a single border, providing a cleaner and more unified visual presentation....

Dashed Table Borders

...

Supported Browsers:

For rounded table borders, apply the CSS ‘border-radius‘ property to the table element with a specified radius value, creating a visually appealing circular border effect....