View video tutorial

HTML Table Borders

HTML

HTML table can have different kind of borders on it.

HTML Table borders


Border can be set on <table>, <tr>, <th> and <td>

Multiple border applied on table may cause showing duplicate border, and this can be prevented by border-collapse property.

border-collapse="collapse" collapse multiple borders into a single border.

HTML Table header

Company Contact Country
Magazzini Alimentari Moctezuma Yoshi Chang Germany
Laughing Bacchus Futterkiste Giovanni Anders Mexico
Ernst Trading Bennett Roland Austria
Island Handel Mendel Helen UK
Centro comercial Riuniti Maria Rovelli Italy
Alfreds Winecellars Francisco Tannamuri Canada

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

HTML Example 1

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td,
        th {
            border: 1px solid #00000055;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>

<body>

    <h2>HTML Table</h2>

    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Magazzini Alimentari Moctezuma</td>
            <td>Yoshi Chang</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Futterkiste</td>
            <td>Giovanni Anders</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Trading</td>
            <td>Bennett Roland</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Island Handel</td>
            <td>Mendel Helen</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Centro comercial Riuniti</td>
            <td>Maria Rovelli</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td>Alfreds Winecellars </td>
            <td>Francisco Tannamuri</td>
            <td>Canada</td>
        </tr>
    </table>

</body>

</html>
Try it Now »

Click on the "See output" button to see how it works.