HTML table border Attribute

Last Updated : 14 Apr, 2025

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.

Syntax:

<table border="value">

In this code:

The value represents the thickness of the border in pixels.

border="1": This means the table will have a border of 1 pixel.
border="0": This will remove the borders from the table, leaving it borderless.

Now, let us understand with the help of the example:

HTML

<html>
<head>
    <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:

In this example:

The body of the page uses flexbox to center all content horizontally and vertically on the screen, including the table and headings.
The table is given a 1-pixel border using the border="1" attribute, and it contains 3 columns: NAME, AGE, and BRANCH.
The table's dimensions are set using height and width as percentages of the viewport, making it responsive. The table is also centered with margin: 0 auto;.
The main heading (<h1>) is colored green using CSS, and the subheading (<h2>) describes the content, both of which are centered.
The table contains two rows of data, with names, ages, and branches of individuals, displayed in table cells (<td>), with each row created using <tr>.

Note: The border attribute is not supported by HTML5.

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; 
}

Now, let us understand with the help of the example:

HTML

<html>
<head>
    <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

In this example:

The body is styled to center-align all the content on the page.
The table is centered horizontally with margin: 0 auto;, and its size is set as a percentage of the viewport (height: 20vh; and width: 40vh;).
collapse; style removes the space between borders of table cells, making them appear as a single solid line.
The <h1> heading is colored green using CSS, while the subheading (<h2>) provides the context of the table content.
The table has a caption "Author Details" and displays a simple data table with three columns: NAME, AGE, and BRANCH, with two rows of data.

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;
}

Now, let us understand with the help of the example:

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

In this example:

The content of the page, including headings and the table, is centered using text-align: center; in the CSS.
The table is horizontally centered using margin: 0 auto; and its size is set as a percentage of the viewport (height: 20vh; and width: 40vh;).
Rounded Borders: The border-radius: 15px; applied to the table, table headers (th), and table data cells (td) creates rounded corners for the table and its cells.
The <h1> heading is styled with a green color, which makes the "GeeksforGeeks" title stand out on the page.
The table contains a caption "Author Details" and displays three columns (NAME, AGE, BRANCH) with two rows of data (BITTU, RAM, etc.), and it has a 1-pixel border around the table and its cells.

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; 
}

Now, let us understand with the help of the example:

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

In this example:

The body of the page is centered using text-align: center; to align the heading and table in the middle of the page.
The table is centered horizontally using margin: 0 auto;, and its height and width are set as a percentage of the viewport (height: 20vh; and width: 40vh;).
Dashed Borders: The border-style: dashed; applied to the table, <th>, and <td> creates dashed borders for the table cells and the table itself.
The main heading (<h1>) is colored green using CSS for styling, making the title "GeeksforGeeks" stand out.
The table has a caption "Author Details" and contains a header row with three columns (NAME, AGE, BRANCH) and two rows of data.

Limitations of the border Attribute

Although the border attribute is quick and easy to use, it has limitations:

Lack of Customization: You cannot control individual borders of cells (top, bottom, left, or right) using the border attribute.
No Style Flexibility: You cannot specify different border styles (solid, dashed, dotted, etc.) using the border attribute. It only affects the width.
Outdated in Modern Development: The border attribute is no longer commonly used in modern web development because it doesn't offer much control over the table's styling.

Supported Browsers:

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

Conclusion

The border attribute in HTML tables offers a simple and quick way to add borders, but it comes with limitations in terms of flexibility and customization. In modern web development, CSS should be used to style table borders because it provides much more control over appearance, such as adjusting border width, color, and style. Additionally, CSS is more versatile and future-proof for styling web pages.

HTML style attribute

jit_t

Improve

Article Tags :

HTML table border Attribute

Collapsed Table Borders

Round Table Borders

Dashed Table Borders

Syntax:

Limitations of the border Attribute

Supported Browsers:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?