Open In App

HTML <table> border Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

Syntax:

<table border="1 | 0">

Attribute Values:

Attribute Values

Description

1 or Any Number

It sets the border around the table cells.

0

It removes (not set) the border around the table cells.

Example: The implementation of 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;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</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:

Screenshot-2023-12-20-105703

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>GeeksforGeeks</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:

Screenshot-2023-12-20-110227

Round Table Borders

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.

Syntax:

table, th, td {
  border-radius: 10px;
}

Example: The implementation of rounded border around a table

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-radius: 15px;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</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:

Screenshot-2023-12-20-110523

Dashed Table Borders

To use dashed table borders, use the CSS ‘border-style’ property and set it to “dashed” for the desired table cells. You can also use dotted , dashed , solid , double , groove , ridge , hidden , none etc.

Syntax:

table, th, td {   
      border-style: dashed; 
}

Example: The implementation of dashed border around a table

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-style: dashed;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</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:

Screenshot-2023-12-20-111040

Supported Browsers:

  • Google Chrome 1
  • Microsoft Edge 12
  • Firefox 1
  • Opera 12.1
  • Safari 1


Last Updated : 17 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads