Color Charge

This articles series covers some useful basic jQuery techniques: coloring alternate table rows, validating target blank links, creating collapsing boxes with a slide in/out effect, and other interesting features you can add to your site. I am going to mix up semantic HTML, with simple CSS, and my library of choice - jQuery, to achieve these results. If you use another library than jQuery this article may still be helpful, because it shows you the detailed process to reach the particular goal.

The technique of this week is very simple and easy to learn. You’re going to learn how to add a zebra-style to your tables, just like iTunes:

Lengthy tables often lead to a boring look-and-feel, and confusing readers when the rows gets too wide and numerous. You can make reading a lot easier by using alternate colored rows.

The logic behind coloring alternate table rows is: use JavaScript (in our case jQuery, but you can do it in your own way) to filter even rows and add a specific CSS class to it, and filter the odd and add the other CSS class. You can do this filtering / sorting with server-side scripting, but today we’re going to use simple client-side to handle that.

Accordingly to best practices and accessibility standards, the HTML markup should be semantic, which means a readable header, body, and optional footer describing the table. There’s an excellent explanation of accessible tables here. Our table is simpler, so we are going to use a shorter, but still accessible markup. That means:

1. <table class=”zebra”>
2. <thead>
3. <tr>
4. <th>Song</th>
5. <th>Length</th>
6. </tr>
7. </thead>
8. <tbody>
9. <tr>
10. <td>Song 01<td>
11. <td>5:57<td>
12. </tr>
13. <tr>
14. <td>Song 02<td>
15. <td>4:31<td>
16. </tr>
17. <tr>
18. <td>Song 03<td>
19. <td>9:12<td>
20. </tr>
21. <tr>
22. <td>Song 04<td>
23. <td>6:40<td>
24. </tr>
25. <tr>
26. <td>Song 05<td>
27. <td>0:57<td>
28. </tr>
29. <tbody>
30. </table>

Easy. The next step is to choose the colors for even and odd rows. In our example, we are going to use the same colors provided in iTunes: #FFF and #F4F7FB. The CSS will be:

1. table.zebra tr.even td, table.zebra tr.even th { background-color:#FFF; }
2. table.zebra tr.odd td { background-color:#F4F7FB; }

The final step is to filter even and odd rows using jQuery selector filters:

1. $( function(){
2. $(”table.zebra tr:even”).addClass(”even”);
3. $(”table.zebra tr:odd”).addClass(”odd”);
4. });

In this fragment, we said to jQuery to do the magic of filtering “:even” rows - beginning with the zero index and add the .even CSS class. Then we said it also to filter the “:odd” rows ( the remaining ones ) and add the .odd. I also used a CSS class to tell jQuery which table it is going to filter: .zebra, because I didn’t want all tables on the page to be styled.

That’s it. Alternating CSS styled tables is easy this way. Instead of “zebra”, se your imagination to give better names to your classes