View video tutorial

HTML Tables

HTML

<table> allows data to be arranged in rows and columns.

HTML Table


HTML <table> has rows <tr> and columns <td> .

One row <tr> has one or more data or columns.

A row <tr> for headers can be set for columns to identify the data under a named <th> group.

Table row <tr> consists of table data<td>

HTML Table

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.

Example

<!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.