Home arrow JavaScript arrow Assigning Background Colors Dynamically to Zebra Tables with CSS and JavaScript

Assigning Background Colors Dynamically to Zebra Tables with CSS and JavaScript

Welcome to the second installment of the series “Building Zebra Tables with CSS and JavaScript.” Comprised of four approachable tutorials, this series shows you different methodologies to help you create the so-called zebra tables with CSS. In addition, it teaches you how to use JavaScript to dynamically generate the alternate background colors of their respective even and odd rows.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
June 18, 2008
  1. · Assigning Background Colors Dynamically to Zebra Tables with CSS and JavaScript
  2. · Review: building a basic zebra table using a CSS-based approach
  3. · Building zebra tables dynamically with a JavaScript function
  4. · Setting up a final hands-on example

print this article

Assigning Background Colors Dynamically to Zebra Tables with CSS and JavaScript
(Page 1 of 4 )

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.

Nonetheless, it’s possible, via the assistance of JavaScript, to dynamically assign alternated background colors to the table’s even and odd rows once the table in question has been created with standard markup. This powerful technique is the main focus of this series of articles. Thus, if you want to learn how to put it to work for you in a short time, then jump ahead and start reading right now!

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.

Actually, this process can be quite annoying and time-consuming, particularly if the table being created contains many rows. Thus, in the course of this second installment of the series, I’m going to show you how to use JavaScript to assign background colors of the pertinent even and odd rows of the table, thus, completely automating this process.

So, are you ready to delve deeper and learn how to build zebra tables with JavaScript? Let’s get started!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials