Striping Tables

Striping tables means to set each alternate row in a table to a different colour to make it more readable.

Using jQuery

For example:

<table class="striped" style="width: 101px; height: 104px;" border="0" cellpadding="3">
<tbody>
<tr>
<td>1</td>
<td>Apples</td>
</tr>
<tr>
<td>2</td>
<td>Bananas</td>
</tr>
<tr>
<td>3</td>
<td>Oranges</td>
</tr>
<tr>
<td>4</td>
<td>Pears</td>
</tr>
<tr>
<td>5</td>
<td>Strawberries</td>
</tr>
</tbody>
</table>

To colour the above table the following code was used:

<script language="JavaScript" type="text/javascript">
         jQuery('.striped tr:even').addClass('evenrow');
         jQuery('.striped tr:odd').addClass('oddrow');
</script>

The ".striped" class ensures that only the table with class "striped" is affected. This is especially important in Joomla as pages are often constructed using tables from the template.

CSS3

Now that CSS3 is out striping can be done without any Javascript.

.table-striped > tbody > tr:nth-of-type(2n+1) {
  background-color: red;
}

Bootstrap

Bootstrap also does striping easily. If you are using it the classes "table table-striped" will do the stripe effect for you. More table effects can be seen here.