How to create a simple table with spearate colours on odd and even rows

This explains on how to style a table with different row colors one after the another.

Create the table using HTML
(If your using div to generate a table you can apply the same for relevant divs as well)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<table id="box-table-a" summary="Employee Pay Sheet"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Salary</th> <th scope="col">Bonus</th> <th scope="col">Supervisor</th> </tr> </thead> <tbody> <tr> <td>Stephen C. Cox</td> <td>$300</td> <td>$150</td> <td>Bob</td> </tr> <tr> <td>..</td> </tr> </tbody> </table>

Create a CSS classes as folows

1 2 3 4 5 6

.odd{ background-color : #F1F1F1; } .even{ background-color : #666699; }

Add Styling using JQuery
JQuery has an attribute to identify odd and even rows in a specified scope. '$('tr:odd')' will check the first odd and then will assign the 'odd' class defined in .addClass('odd').

1 2 3 4

$(document).ready( function(){ $('tr:odd').addClass('odd'); $('tr:even').addClass('even'); }