Adding alternately colored rows to your dynamic tables

We've all seen search results tables where the rows are alternately colored, something like this:

1	Blah blah blah blah blah blah blah blah blah blah blah blah blah
2	Yada yada yada yada yada yada yada yada yada yada yada yada yada
3	Blah blah blah blah blah blah blah blah blah blah blah blah blah
4	Yada yada yada yada yada yada yada yada yada yada yada yada yada
5	Blah blah blah blah blah blah blah blah blah blah blah blah blah

But how can we create something similar in Dreamweaver MX? The simple answer is that we can't do it directly yet, but it can be done with a little bit a hand coding.

The great beauty of Dreamweaver MX is that it works directly on your document, meaning that it's as easy as pie to go in and make changes in the code as we're working. We're going to take advantage of that now by making some basic changes to the Repeat Region code.

First we need to create a basic Repeat Region - I'm sure you're familiar with that by now. I've created a table and entered my data place holders in the usual way

This example is coming from my 'employees' table - one that I've be using in some of the tutorials. I need to make this a Repeat Region, and I'm going to select 10 records to be displayed.

I click OK, and my row is flagged up as a Repeat Region.

If you were to view the page at this stage, you would see that each record is listed on a standard white background - that's what we'd expect really.

All we need to do now is add a snippet of code at the beginning of our row. The code uses a simple bit of mathematics to work out where the row is odd or even, and then changes the color accordingly.

It really helps if you're familiar with HTML - if you're not, it's easy to learn and you might want to have a look at learning it - it will really help when doing things in Dreamweaver.

Flip into Code view (View > Code). You'll see that the server code (ASP in my case) is interwoven with the HTML.

The chunk of code above is our Repeat Region.

Tip: To make it easy to find items in the code, highlight the item in the Document window first, then when you switch to Code View your item will be highlighted there also.

In HTML, a row is marked out by a <tr> (table row) tag - and it is closed by a </tr> tag.

We need to insert our code to replace the <tr> tag at the beginning of the Repeat Region.

Here's the code (VBScript) we need to insert:

The color values can be changed to the colors you wish to use. I have chosen white and a shade of blue.

If you're using JavaScript, rather than VBScript, this is the code you need:

For those working in ColdFusion:

I'm going to continue in VBScript. If you experience any problems with error messages after inserting this code, then it's suggested that you try copying and pasting the Repeat1_numRows phrase from the code inserted by Dreamweaver MX. That usually sorts out any problems.

You can see where I've inserted the code - from line 45 to line 49. That's all that needs to be done.

If you use CSS on your site already (you are using CSS, right?!) then you'll want to specifiy a class to use instead of the inline style in the code above. This will work fine, just swap out the style="" for class="" and you're away. Inline styles were only used so not to distract from the task in hand - CSS classes are recommended.

If I preview my page in the browser, it looks like this

That's all there is to it. My thanks are extended to Julian Roberts, who initially introduced me to this technique, and to Mike Barbarelli from Macromedia Technical Support, who found this method of alternating colors whilst still keeping all elements editable in Dreamweaver. Also to Tom Muck and others for posting the JavaScript version to the UltraDev newsgroup. The ColdFusion code was supplied by Uncle Massimo. Thanks guys.