Alternating Rows

By JavaScriptSource Staff on Sep 7, 2007


Make your tabular data nice and readable. Just add some colors to this script and – voila! – no hassle alternate row coloring. Your data stays pristine, your output is improved, and your markup barely changes.

Name Extension Start date
Bloggs, Fred 1353 08/18/2003
Turvey, Kevin 2342 02/05/1979
Mbogo, Arnold 2755 09/08/1998
Shakespeare, Bill 3211 12/11/1961
Fitz, Marvin 5554 05/22/1995


  • Created by: Arc90, Inc.
  • Web Site:
  • Posted: September 7, 2007

Two way to style the rows:

In the style sheet:

To do this, in the <table> tag, add class="arc90_altrows-..." and a keyword as an attribute of your table tag, e.g.,


Then, in your stylesheet, reference the created classes (note the number at the end of each classname):

.arc90_altrowsGreen0 { background-color: #D0997E; }
.arc90_altrowsGreen1 { background-color: #E5C6B7; }
.arc90_altrowsGreen2 { background-color: #F3E4DD; }

In the <table> tag:

Use either a THEMENAME or 2 or more COLORs separated by dashes

Theme: arc90_altrows-THEMENAME
Colors: arc90_altrows-COLOR1-COLOR2-COLOR3

<table class="arc90_altrows-C67952-F1DDD5"

Further details can be found on the author’s Web site

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: arc90_altrows.js


Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Paste this code into the HEAD section of your HTML document.


Paste this code into the BODY section of your HTML document


Blog comments powered by Disqus