6. Tables

In some sections we'll need to show structured and ordered information: a table. Each one can include its own title, a title per column and, of course, its information. The only limitation we'll encounter is that all rows must be made up of the same number of columns.

Among the tags we'll make use of:

Simple

<table>
    <thead>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Left content</td>
            <td>Right content</td>
        </tr>
    </tbody>
</table>

{: .advice } For accessibility reasons, and the correct functioning of screen readers, tables must always carry header cells indicating the direction (scope="row" and scope="col").

Add a title

Use the caption tag inside table.

<table>
    <caption>My table</caption>
    <thead>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Left content</td>
            <td>Right content</td>
        </tr>
    </tbody>
</table>

Footer

Use the tfoot tag at the end of table.

<table>
    <thead>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Left content</td>
            <td>Right content</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="col">Left column title</th>
            <th scope="col">Right column title</th>
        </tr>
    </tfoot>
</table>