HTML Course

Tables

Go back

You are gonna use the table tag with a subtag thead for the first line with the column names (if you want one) and tbody for your table content. A line is made using tr tag, and you use th for the columns' names and td for the columns' values.

<table>
    <!-- header of your table -->
    <thead>
        <tr>
            <th>column1 title</th>
            <th>column2 title</th>
        </tr>
    </thead>
    <!-- body of your table -->
    <tbody>
        <!-- a line -->
        <tr>
            <td>line-1 col-1</td>
            <td>line-1 col-2</td>
        </tr>
        <tr>
            <td>line-2 col-1</td>
            <td>line-2 col-2</td>
        </tr>
    </tbody>
</table>
Note that this is a good practice to use thead and tbody (HTML5), but you can omit them (🙄😒)
<table>
<tr>
    <th>column1 title</th>
    <th>column2 title</th>
</tr>
<tr>
    <td>line-1 col-1</td>
    <td>line-1 col-2</td>
</tr>
<tr>
    <td>line-2 col-1</td>
    <td>line-2 col-2</td>
</tr>
</table>

Preview

Note that I added some style.

column1 title column2 title
line-1 col-1 line-1 col-2
line-2 col-1 line-2 col-2

The table raw is a bit unreadable/messy after all

column1 titlecolumn2 title
line-1 col-1line-1 col-2
line-2 col-1line-2 col-2

Improving your tables


You can add a caption, a small title above your table
Some caption
column1 titlecolumn2 title
line-1 col-1line-1 col-2

The code is

<table>
    <caption>Some caption</caption>
    <!-- ... -->
</table>
If you have a footer, you may use tfoot
column1 titlecolumn2 title
line-1 col-1line-1 col-2
FooterFooter

The code is

<table>
    <!-- ... -->
    <tfoot>
        <tr>
            <td>Footer</td>
            <td>Footer</td>
        </tr>
    </tfoot>
</table>
You can add colspan/rowspan to a cell (td/th), to make it take multiples columns/lines.
column1 titlecolumn2 title
line-1 col
line-2 col-1line-2 col-2

The code is

<table>
    <!-- ... -->
    <tfoot>
        <tr>
            <td>Footer</td>
            <td>Footer</td>
        </tr>
    </tfoot>
</table>