How To Zebra-Stripe Tables Using CSS and jQuery
As I was browsing my ridiculously large and disorganized RSS feeds a few days ago, I came across a very interesting article that discusses the “benefits” of using zebra-striping on tables. The article was titled Zebra Striping: Does it Really Help? and it was published on A List Apart. In short, the author of the article discusses the use of zebra-striping, its history, and the benefits which are associated with its use. Furthermore, she describes and attempts to make sense of a small experiment carried out by herself in order to test the “benefits” linked to zebra-striping. The article concludes with the author’s assesment of zebra-striping as valuable in terms of visual appeal but with little to no influence on usability. As a concluding statement she writes, “At the end of the day, the decision about whether to use zebra striping probably comes down to a subjective assessment of likely gains versus the cost of implementation.” So, let’s make the cost of implementation minimal by using some simple jQuery and CSS. Before we begin, here is a sneak peak at the final result.
jQuery Zebra Stripes Script
There are many ways to implement a zebra-striping script using jQuery, and I will demonstrate one of them. The following approach uses a function, which takes two (optional) parameter and creates a specified CSS class for all the even rows of a given table. However, if the function is called without any parameters all even rows on tables will be given the class “even-row.” Here is what the script looks like:
- $(document).ready(function()
- {
- stripeTable();
- });
- function stripeTable(table_name, class_name)
- {
- var target;
- if(table_name && class_name)
- {
- target = table_name + " tr:even";
- $(target).addClass(class_name);
- }
- else
- {
- target = "table tr:even";
- $(target).addClass("even-row");
- }
- }
Note: the above script is calling the function with no parameter and thus will reset to the default rules.
Add Some Style
Now that our script is complete and working, let’s add some color to the newly created class, “even-row.” Remember that this class name is given because we did not specify parameters when we called the function on the script above. So, here is what the “even-row” CSS for the demo looks like:
- #content table tr.even-row td
- {
- color: #c76400;
- background: #e6e6e6;
- }
Note: the ID content is targeting a div of the same name on the example file. Thus, when implementing your own CSS rules remove it.
Use, Installation, and Download
In case you overlooked the sneak preview link at the beginning of this post, take a look at the script in “action” by clicking this demo link. This script is free for your use or modification. However, you need to download and install jQuery for the zebra-striping to work. In other words, the
of your document will have to include the following files and look something like this:In any case, enough talking (writing), download the script and enjoy!
