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

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