Zebra Tables

In order to make tables more readable, striping is often used. To take advantage of this, all that needs to be done is:

• Give your table a id
• <script type="text/javascript">stripe("table_id");</script>

Normal Zebra table

Was generated using the following code:

<table id="table_id">
<thead>
<tr><th>Heading</th><th>row</th></tr>
</thead>
<tfoot>
<tr><td>Footer</td><td>row</td></tr>
</tfoot>
<tbody>
<tr><td>Row</td><td>1</td></tr>
<tr><td>Row</td><td>2</td></tr>
<tr><td>Row</td><td>3</td></tr>
<tr><td>Row</td><td>4</td></tr>
<tr><td>Row</td><td>5</td></tr>
</tbody>
</table>
<script type="text/javascript">stripe("table_id");</script>

There is a version of the stripe fuction, which allows you to specify the colors you want. It is simply

<script type="text/javascript">stripe("table_id", "even_row_color", "odd_row_color");</script>

where even_row_color and odd_row_color are the color specifications.

Red-Black Zebra stripes

Was generated using the following code:

<table id="table_id">
<thead>
<tr><th>Heading</th><th>row</th></tr>
</thead>
<tfoot>
<tr><td>Footer</td><td>row</td></tr>
</tfoot>
<tbody style="color: white;">
<tr><td>Row</td><td>1</td></tr>
<tr><td>Row</td><td>2</td></tr>
<tr><td>Row</td><td>3</td></tr>
<tr><td>Row</td><td>4</td></tr>
<tr><td>Row</td><td>5</td></tr>
</tbody>
</table>
<script type="text/javascript">stripe("table_id", "#af0909", "#414241");</script>

Additionally, you can add a CSS style for hovering over rows:

<style type="text/css">
#table_id tr:hover td {background-color:#FFFFC7 !important;}
</style>

"Zebra Tables"