How to create a table with border in an HTML page

HTML Table Border

In HTML, you can add border to a table by applying CSS styles.

You can also add border to a table using the border attribute within the <table> tag .

How to Add Border to an HTML Table Using CSS Styles

Create an HTML table as shown in the following example.

Add HTML <style> element inside the head section of your page.

Use 'table' as selector and add 'border-collapse: collapse;' CSS style to the table selector. It helps create a cleaner and more compact appearance for the table.

Use 'th, td' as selectors and add 'border: 1px solid #808080; text-align: left; padding: 8px; CSS styles to the table header and table data selectors.

'border: 1px solid #808080;' CSS style sets 1px solid border to the the table header and table data of the table.
'text-align: left;' CSS style sets the align of the text to the left.
'padding: 8px;' CSS style sets 8px padding.

Have a closer look at the code and its output:

Example of HTML Table With Border

xxxxxxxxxx
 
<!DOCTYPE html><html><head>    <style>        table {            border-collapse: collapse;        }​        th, td {            border: 1px solid #808080;            text-align: left;            padding: 8px;        }    </style></head><body>    <h4>Example of Table in a Webpage</h4>    <hr/>    <!--<table> is used to create table-->    <table>        <tr>   <!--<tr> is used to create table row-->            <th>Name</th> <!--<th> is used to create table header-->            <th>Gender</th>            <th>Age</th>        </tr>        <tr>            <td>Alice Jonathon</td> <!--<td> is used to create table data-->            <td>Female</td>            <td>15</td>        </tr>        <tr>            <td>Peter Parker</td>            <td>Male</td>            <td>16</td>        </tr>    </table></body></html>​

Output of the above code example

Example of Table in a Webpage

Name	Gender	Age
Alice Jonathon	Female	15
Peter Parker	Male	16

In the above example, data have been presented in a tabular format with table border.

Live Code Playground

In the following HTML code editor, you can practice the above code by adding more table row and data. Click the 'Run Code' button to render the code; the rendered page will be displayed in the following HTML Code Output frame. Practice until you become comfortable and proficient with your code.

HTML Online Editor

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }
​
        th, td {
            border: 1px solid #808080;
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h4>Example of Table in a Webpage</h4>
    <hr/>
    <!--<table> is used to create table-->
    <table>
        <tr>   <!--<tr> is used to create table row-->
            <th>Name</th> <!--<th> is used to create table header-->
            <th>Gender</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Alice Jonathon</td> <!--<td> is used to create table data-->
            <td>Female</td>
            <td>15</td>
        </tr>
        <tr>
            <td>Peter Parker</td>
            <td>Male</td>
            <td>16</td>
        </tr>
    </table>
 </body>
</html>
​

HTML Code Output

More Code Examples:

Python Code Examples

JavaScript Code Examples

Java Code Examples

C# Code Examples

C Code Examples

C++ Code Examples