What Are We Facing?

Commonly, web designers are faced with the task of presenting tabular data, a common practice to display lots of data is the use of different colors for alternate rows, this is used as an aid to improve the readability of the information presented.

The most common way to use different colors in alternating rows is to use different CSS classes for the odd and even rows so we can apply a different style to each one. There are several ways to generate the classes in the rows, they can be generated when the table is created, usually by a server side script (ASP, PHP, JSP), or the classes can be set on client side, using javascript.

The Solution

Because we are trying to create a generic sample, we are going to focus on the client side generation of the CSS classes, and one of the best ways to achieve this is using jQuery.

jQuery is a very popular javascript library that provides us with many really useful functions and utilities that allow really neat effects in the client side code.

Including jQuery

To use the jQuery functions in our HTML document, we have to download the latest jQuery library from the jQuery download page and include the library in the document with a script tag like the following in the head of the page.

<script src="jQuery-1.2.6.min.js" type ="text/javascript"></script>

This tag adds a link to the jQuery library (version 1.2.6), and allows you to use jQuery functions in all the scripts of your page.

Creating the markup and styles

To create the "striped" table, we need to create a table with an id to identify it and apply the style only to that table, in this example we'll name it "stripedTable"

<table id="stripedTable">

After the table is defined, we need to create the styles that will apply to the table rows, thus we create a style for the even rows and another for the odd rows. In this code sample we'll also create an style for the table header

    <style type="text/css"> 
       .oddRow {background-color:#eeeeee;} 
       .evenRow {background-color:#cccccc;} 
       th {background-color:#666666;} 
    </style>

Creating the jQuery code

Finally, we need to create the jQuery code that will add the CSS classes to the tr tags, this is achieved with this code:

    <script type="text/javascript"> 
       $(document).ready(function() { 
       $("#stripedTable tr:odd").addClass("oddRow"); 
       $("#stripedTable tr:even").addClass("evenRow"); 
    }); 
    </script>

The first line of this code inside the script, registers a new function to be executed when the page has finished loading, the next line selects the odd tr tags inside an element with the id stripedTable and adds them the class "oddRow", the last line does the same with the even lines, adding them the class "evenRow".

Given that the assigned class names are the classes that are defined in the CSS style block, the table will be rendered with that style, producing the following result:

As we can see, the table gets the styles in a really neat way, and we have improved the readability of the presented information easily.

Some external references

• ALA Zebra Striping Analysis.
• jQuery Main Page.
• Zebra Striping Made Easy with jQuery.