Monday, September 11th, 2006

Alternating Rows

Make your tabular data nice and readable with tool number five from the arc90 lab, Alternating Rows. Just add some colors to our JavaScript and — voila! — no hassle alternate row coloring.

What is this?

Ever walk by a coworker’s desk and catch him tracing across his screen with his index finger? Sick of staring at reports where the rows all blend together? Tabular data should have properly placed emphasis – without having to corrupt data with display information.

With just a single line of code, Alternating Rows styles up any table with easy to read row coloring that you define. Your data stays pristene, your output is improved and your markup barely changes. It’s a win-win-win.

How Do I Use It?

To use Alternating Rows on your site or blog, just follow these simple steps:

Download The Code

Click on the icon below to download the source code:

Download

The file, altrows.zip, contains the script and an example page. Once downloaded, upload the script to relevant location on your hosted site.

Link To The Javascript

Add a link to the javascript file in the page(s) you’d like alternating rows implemented. Remember to adjust the path to properly point to the location of the javascript file:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>arc90 lab | tools: Alternating Rows Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_altrows.js"></script>
</head>
Styling your tabular data

There are two ways to style your alternating rows:

You can define colors right in the table’s class tag by choosing your desired row colors, defined in hexadecimal and separated by a dash, and adding them as the class=”arc90_altrows-[your codes here]“ attribute of your table. Here’s an example:

<table class="arc90_altrows-C67952-F1DDD5" summary="Acme Employee List">
<thead>
<tr>
<th>Name</th>
<th>Extension</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith, John</td>
<td>1353</td>
<td>

Or, you can abstract the codes to a stylesheet. To do this, add class=”arc90_altrows-…” and a keyword as an attribute of your table tag.

<table class="arc90_altrows-Green" summary="Acme Employee List">

The script will take this keyword and create alternate row classes as shown below:

<table class="arc90_altrows-Green" summary="Acme Employee List">
<thead>
<tr class="arc90_altrowsGreen0">
<th>Name</th>
<th>Extension</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr class="arc90_altrowsGreen1">
<td>Bloggs, Fred</td>
<td>0933</td>
<td>August 18, 2003</td>
</tr>
<tr class="arc90_altrowsGreen0">
<td>Turvey, Kevin</td>
<td>2342</td>
<td>February 12, 2000</td>
</tr>
<tr class="arc90_altrowsGreen1">
<td>Mbogo, Arnold</td>
<td>...

Then, in your stylesheet, reference the created classes:

.arc90_altrowsGreen0 { background-color: #70BD43; }
.arc90_altrowsGreen1 { background-color: #D4E9C8; }
Want more than two colors?

Not a problem. A nice little feature of the inline version is scability. Add a few more colors to those exceptionally long datasets (but don’t go crazy without consulting a designer, ok?).

<table class="arc90_altrows-D0997E-E5C6B7-F3E4DD" summary="Acme Employee List">
<thead>
<tr>
<th>Name</th>
<th>Extension</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Presley, Elvis</td>
<td>4545</td>
<td>...

Examples

You can see alternating rows in action by clicking here.

Supported Browsers

Currently, the alternating rows script has been tested and confirmed on the following browsers:

  • Internet Explorer 6.0+
  • Mozilla Firefox 1.5+
  • Apple Safari 2.0
  • Opera Version 9.0

Licensing

This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.

Discuss Alternating Rows

You can send feedback on Alternating Rows at the arc90 blog.

Comments are closed.