How to Create Table Border in HTML ?

Last Updated : 15 Mar, 2024

In HTML, we can represent the data in the tabular format by using the <table> tag. We can customize the table by creating a border with different widths and colors.

Below are the approaches to create a Table Border in HTML:

Table of Content

Using HTML Table Tag Attributes
Using HTML Inline Styling

Using HTML Table Tag Attributes

In this approach, we are using the border attribute within the <table> tag to specify the width of the border around the table and its cells. By setting the value to 3, we create a border with a thickness of 3 pixels.

Syntax:

<table border="3">

Example: The below example uses HTML Table Tag Attributes to create a table border in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 1</title>
</head>

<body>
    <h3>Using HTML Table Tag Attributes</h3>
    <table border="3">
        <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Marks</th>
        </tr>
        <tr>
            <td>GeeksforGeeks</td>
            <td>HTML</td>
            <td>82</td>
        </tr>
    </table>
</body>

</html>

Output:

Table border using table tag attributes.

Using HTML Inline Styling

In this approach, we are using inline styling <style> directly within the HTML elements to define the table borders. By applying the border property to the <table> and <th>/<td> elements, we specify the border width, style, and color.

Syntax:

<table style="border: 3px solid black; border-collapse: collapse;">

Example: The below example uses HTML Inline Styling to create a table border in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 2</title>
</head>

<body>
    <h3>Using HTML Inline Styling</h3>
    <table style="border: 3px solid black; 
                  border-collapse: collapse;">
        <tr>
            <th style=
                "border: 3px solid rgb(255, 0, 0);">Name</th>
            <th style=
                "border: 2px solid rgb(255, 0, 0);">Subject</th>
            <th style=
                "border: 2px solid rgb(255, 0, 0);">Marks</th>
        </tr>
        <tr>
            <td style=
                "border: 1px solid rgb(255, 0, 0);">Data 1</td>
            <td style=
                "border: 2px solid rgb(0, 255, 21);">Data 2</td>
            <td style=
                "border: 1px solid rgb(255, 0, 0);">Data 3</td>
        </tr>
    </table>
</body>

</html>