Alternating Table Row Background Color

When data tables are very wide, the eye may stray to another row before the entire table line is read. For that reason or for simple elegance, alternating table rows may contain a different background color.

This article provides the code and instructions for changing the background color of a table every so many rows.

Articles about changing row colors when the mouse pointer hovers over it and general information about colorizing tables are also available. See article Table Row Color Change On Mouseover or article Colorizing Tables, respectively.

Alternating table background color as presented here is done with JavaScript. The background color updates are done after the table's source code has been inserted into the web page. Thus, if the table is generated with a PHP or other script, no problem, the JavaScript runs afterward.

Here is an example.

The example has the background color changed every 2 rows, which was specified in the JavaScript. It could have been every 3 rows or any other positive number.

To implement your own, give your table an id value and insert JavaScript somewhere below the table. Use the above example as a guide.

Here is the example form code:

<table id="exampletable" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>Bus</td><td>House</td><td>Bird</td><td>Orange</td>
</tr>
<tr>
<td>Auto</td><td>Shed</td><td>Animal</td><td>Blue</td>
</tr>
<tr>
<td>Trailer</td><td>Barn</td><td>Fish</td><td>Gold</td>
</tr>
<tr>
<td>Tractor</td><td>Garage</td><td>Insect</td><td>Silver</td>
</tr>
</table>

And here is the JavaScript. Customization information follows.

<script type="text/javascript">
/* 
   Alternating Table Row Background Color
   Version 1.0
   February 13, 2012

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2012 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/
// // // // // // // // // //
//
// Customization
// Three places to customize.
//
// Place 1 --
// Specify the id value of the table tag.

var TableIDvalue = "exampletable";

// Place 2 --
// Specify which every so many rows to update with a 
//    background color. Every other row would be the 
//    number 2. Every third row the number 3. And so forth.

var EveryHowMany = 2;

// Place 3 --
// Specify the background color for the alternate rows.  
//    Any legal CSS color value is acceptable; hex, rgb,  
//    or color name.

var BackgroundColor = "#9ff";

//
// End of customization.
//
// // // // // // // // // //
if( parseInt(EveryHowMany) < 1 ) { EveryHowMany = 1; }
var table = document.getElementById(TableIDvalue);
var rows = table.rows;
for( var i=0; i<rows.length; i++ ) {
   if( (i+1) % EveryHowMany ) { continue; }
   table.rows[i].style.backgroundColor = BackgroundColor;
   }
</script>

The JavaScript has three places marked for customization:

1. TableIDvalue — Specify the id value of the table. In the example table, the id value is in blue for easy recognition. Copy the exact id value from the table and paste it into the JavaScript.

2. EveryHowMany — Specify every how many rows to update with a new background color. Specify 2 for every other row. 3 for every third row. And so forth.

3. BackgroundColor — Specify the background color for the alternate rows. Any legal CSS color value is acceptable; hex, rgb, or color name.

Any table with an id value can have alternate rows with a different background color. Simply put the JavaScript somewhere below the table.

Will Bontrager