Zebra Table

Description

A table with odd and even tr rows rendered automatically (without specifying class="even" manually).

Sample

Include the following java scripts on your page.

<script type="text/javascript"
    src="http://www.ucsd.edu/common/cwp/active-cherry/lib/jquery.zebratable-1.0/jquery.zebratable-min.js" /></script>
<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        // table
        $(".zebratable").zebratable();
    });
})(jQuery);
</script>

In this case, we specified that all elements with class zebratable will have the row coloring. You should always have table class="styled" since CSS styling are being applied to it.

<table class="zebratable styled">
    <thead>
    <tr>
        <th>Country</th>
        <th>Total area</th>
        <th>Land area</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Denmark</td>
        <td>43,070</td>
        <td>42,370</td>
    </tr>
    <tr>
        <td>Finland</td>
        <td>337,030</td>
        <td>305,470</td>
    </tr>
    <tr>
        <td>Iceland</td>
        <td>103,000</td>
        <td>100,250</td>
    </tr>
    <tr>
        <td>Norway</td>
        <td>324,220</td>
        <td>307,860</td>
    </tr>
    <tr>
        <td>Sweden</td>
        <td>449,964</td>
        <td>410,928</td>
    </tr>
    </tbody>
</table>