Using the Style Object for Zebra Tables with CSS and JavaScript

If you’re a web designer who needs to display the tabular data of your web sites in a very professional way, then you should take a look at zebra tables, which, as you possibly know, use two alternating background colors for their respective odd and even rows.

The downside of zebra tables is that they can be quite hard to build from scratch, particularly if they contain numerous rows. They have to be decorated alternately either by using an “id” or a “class” attribute, which you’d do normally with other web page elements.

Fortunately for you and me, it’s perfectly possible to build a small JavaScript application that first iterates over the rows of the table in question, and then assigns the correct CSS styles to each of them. This will automate the whole process of constructing a zebra table.

Of course, in order to implement this JavaScript-based approach and start constructing zebra tables here and there, you need a friendly guide that walks you through the right steps. So don’t waste any more time and begin reading this article series, since it will provide you with concise and useful material about using a combination of unobtrusive JavaScript and CSS to build fancy, eye-catching zebra tables that make your web site really shine!

If you had the chance to read the preceding article of the series, you should be familiar with creating zebra tables by way of a simple JavaScript function that is responsible for automatically styling the even and odd rows of a specified table. I also incorporated the ability to work with tables that contain multiple <tbody> sections. This created a JavaScript-driven solution that can be used with a huge variety of web applications.

In addition, to style the pertinent rows of a zebra table, the aforementioned JavaScript function used two different CSS classes that were assigned alternately to each row of the table. However, it’s also feasible to use a “style” object, instead of a CSS class, to manipulate the background colors of the appropriate rows. This eventually could be easier to code, even when this object isn’t standard compliant.

With the preliminaries out of our way, let’s get started!