Web Design: Zebra Striping Tables

This is a fairly simple method of using JavaScript to zebra-stripe tables. Zebra-striping makes for more readable tables, and this is a unobtrusive, fairly lightweight way of doing the striping.

The script is based on Jeremy Keith’s version in DOM Scripting, with a couple of additions. Also worth looking at is the A List Apart article, Zebra Tables, by David F. Miller, and the discussion thereof.

First, the tables. No stripes:

The same table, zebra-striped:

The Code

Here’s the JavaScript:

function stripe()
	{
	if ( !document.getElementsByTagName )
		{
		return false;
		}
// grab all table elements
	for ( var i = 0; i < table.length; i++ )
		{
// test for stripe class
		if ( /stripe/.test(table[i].className) )
			{
// grab rows for that table
			var row = table[i].getElementsByTagName( "tr" );
			for ( var j = 0; j < row.length; j++ )
				{
// apply background color to odd rows
				if ( j % 2 == 0 )
					{
					row[j].style.backgroundColor = "#DDD";
					}
// while we're at it, remove the bottom border
				row[j].style.border = "0";
				}
			}
		}
	}
	
addLoadEvent( stripe );

In Detail

Line by line, we start with the function, and the test for compatibility with getElementsByTagName. Next, we get all the tables in the document:

We follow this with a loop to go through the table array, testing for the stripe class. This allows us to limit what get striped (in case we want/need to):

If we find the stripe class, we grab all the rows of the table, and loop through those:

var row = table[i].getElementsByTagName( "tr" );
for ( var j = 0; j < row.length; j++ )

Be sure and change the variable in the loop, or at least not use the same as before. Next we test j. All we want to know is if it is even or odd. I like to use the modulo operator, and here the test is for even:

If j is even, we change the background color:

Just for fun, and because we really don’t need it anymore, outside the even/odd test loop but inside the row loop, we set the border to 0. This is done at this point so that all the rows get no border:

The script is fired using addLoadEvent, which allows more than a single onload to happen. While not entirely neccessary, using the addLoadEvent script is not a terrible habit to get into. Both addLoadEvent.js and and the stripe function, stripe.js, are included in the head of our document using script tags.