The arc90 lab is the playground of arc90 - a New York-based technology and strategic consulting firm. The lab is a place for us to share our ideas, tools and the occasional experiment in web technology. All ideas, experiments and tools are licensed under Creative Commons.
This site is licensed under a Creative Commons Attribution 2.5 License.
Tools
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:
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:
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:
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.
The script will take this keyword and create alternate row classes as shown below:
Then, in your stylesheet, reference the created classes:
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?).
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.
