As its name suggests, a zebra table is simply a regular (X)HTML table that uses one background color for its even rows and a different color for its odd ones. This makes it extremely useful for providing tabular data with a true professional appearance. However, despite the fact that these tables have become very popular with many modern web designers, admittedly, they’re pretty hard to code from scratch, especially if they’re not generated by a server-side scripting language.
Having already introduced the main subject of this article series, I think this is an appropriate moment to rehash the group of topics that were covered in the last article of the series, with reference to building basic zebra tables using a simple combination of CSS styles and structural markup.
Speaking specifically about this process, I’m sure that with all of the code samples that you learned in the mentioned tutorial, you’re armed with the required background to start incorporating a few zebra tables into your own web sites, especially if you want to provide your tabular data with a polished and professional look and feel.
As you saw in the previous article, a zebra table can be easily constructed by defining two (or eventually only one) CSS classes, which are assigned alternately to the odd and even rows of the table in question. However, the major drawback to building it in this manner is that each of the CSS classes has to be included manually into the markup via a “class” attribute.