Table

Description

Style HTML table to convey content clearly. You'll need to add class itag_table to the table element. We cannot style the table element directly since some older websites still use table to do their page layout.

For zebra strips on alternating rows, apply the class even and odd on the tr element. If you do not want to do this manually, check out our widget section which automates this with some javascript.

Sample

Caption: Sample table: Areas of the Nordic countries, in sq km
Country Total area Land area
Denmark 43,070 42,370
Finland 337,030 305,470
Iceland 103,000 100,250
Norway 324,220 307,860
Sweden 449,964 410,928
<table class="styled"
    summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
    <caption>Caption: Sample table: Areas of the Nordic countries, in sq km</caption>
    <thead>
    <tr>
        <th>Country</th>
        <th>Total area</th>
        <th>Land area</th>
    </tr>
    </thead>
    <tbody>
    <tr class="even">
        <td>Denmark</td>
        <td>43,070</td>
        <td>42,370</td>
    </tr>
    <tr class="odd">
        <td>Finland</td>
        <td>337,030</td>
        <td>305,470</td>
    </tr>
    <tr class="even">
        <td>Iceland</td>
        <td>103,000</td>
        <td>100,250</td>
    </tr>
    <tr class="odd">
        <td>Norway</td>
        <td>324,220</td>
        <td>307,860</td>
    </tr>
    <tr class="even">
        <td>Sweden</td>
        <td>449,964</td>
        <td>410,928</td>
    </tr>
    </tbody>
</table>