Building Zebra Tables with CSS and JavaScript
(Page 1 of 4 )
This is the first article in a four-part series that will teach you how to build basic zebra tables using CSS, server-side scripting languages, and JavaScript. If this interests you in any way, I strongly advise you to start reading...NOW!
Nowadays, many web designers are starting to build web sites by using DIV-based layouts exclusively, and they only pull the venerable tables out of their toolbox when it comes to displaying tabular data. True to form, creating web pages with the table-less approach is a trend that's growing rapidly over time, as more and more web developers stick to the standards recommended by the W3 Consortium.
Naturally, because this scenario favors DIVs, tables are erroneously considered by many to be the evil player of the game. However, as I said in the beginning, they're helpful for showing tabulated information on web pages.
As with other elements in a web document, tables can be styled in all sorts of clever ways to make them look fancy and professional before the eyes of different users, which is something that you've probably done hundreds of times. This concept obviously brings up the subject of this series of articles (weird, but it looks like everything has to do with tables!). Yes, one of the most common techniques used to style tabular data on a web page is "zebra tables."
Before you start making jokes about "monkey web forms" or "dog DIVs," let me tell you what a zebra table is. In layman's terms, zebra tables are tables whose respective odd and even rows are displayed using alternated background colors. Now, do zebra tables sound familiar to you? I bet they do, since they're currently used by many modern web sites as an elegant method to display product catalogs, forecast information, real estate data, etc.
Of course, there are several approaches that can be used to construct zebra tables with relative ease, ranging from pure CSS and simple structural markup, to utilizing a server-side scripting language like PHP to dynamically generate the respective odd and even rows. Nevertheless, in this series of articles, not only am I going to teach you how to build basic - yet fancy -- zebra tables by way of distinct methodologies, but also how to facilitate their creation with a small pinch of JavaScript.
Hopefully, by the end of this series, you will be armed with a decent background in building zebra tables using both client- and server-side approaches. Therefore, before I end up knocking the doors off the zoo, let's move on and start discovering the hidden magic of building zebra tables! Here we go!
Next: Building zebra tables with a server-side scripting language >>
More JavaScript Articles
More By Alejandro Gervasio
/ 6 
