Dreamweaver - CSS; alternating colours for <tr> tags

Author

CSS; alternating colours for <tr> tags

Benno

2004-04-21, 2:47 pm

I have a dynamic site using asp code in which created tables, dynamically add
the neccessary amount of <tr> tags to display the information.
How do I create a style sheet the can set alternating colours for the <tr>
rows as they are created.
I wish to have them displayed as; grey / white / grey / white...etc. so as you
can differentiate between the rows.
At present I am using a repeated image in the background of the table to
create a tiled image but was hoping to do it with the use of an image.
(This method is limited to fixed height <tr> to maintain consistancy.)
Any help would be appreciated.
Benno.

Josh Johnson

2004-04-21, 2:48 pm

Benno wrote:
> I have a dynamic site using asp code in which created tables, dynamically add
> the neccessary amount of <tr> tags to display the information.
> How do I create a style sheet the can set alternating colours for the <tr>
> rows as they are created.
> I wish to have them displayed as; grey / white / grey / white...etc. so as you
> can differentiate between the rows.
> At present I am using a repeated image in the background of the table to
> create a tiled image but was hoping to do it with the use of an image.
> (This method is limited to fixed height <tr> to maintain consistancy.)
> Any help would be appreciated.
> Benno.

Create your repeat region such that every other row has a class
attached, like this:
<tr><td></td></tr>
<tr class="evenrow"><td></td></tr>
<tr><td></td></tr>
<tr class="evenrow"><td></td></tr>

Then create css like this:
tr td {background-color:white;}
tr.evenrow td {background-color:grey;}

And you should be good to go.
Hope this helps,

Josh

David Stiller

2004-04-21, 2:48 pm

As an alternative (and, I think, conveniently easy) approach, try the
JavaScript example described in this A List Apart article ...

http://www.alistapart.com/articles/zebratables/

David
stiller ( at ) quip ( dot ) net

"Josh Johnson" <josh.johnson@NOSPAMsun.com> wrote in message
news:c5nfc3$bln$1@forums.macromedia.com...
> Benno wrote:
dynamically add[color=darkred]
<tr>[color=darkred]
as you[color=darkred]
to[color=darkred]
>
> Create your repeat region such that every other row has a class
> attached, like this:
> <tr><td></td></tr>
> <tr class="evenrow"><td></td></tr>
> <tr><td></td></tr>
> <tr class="evenrow"><td></td></tr>
>
> Then create css like this:
> tr td {background-color:white;}
> tr.evenrow td {background-color:grey;}
>
> And you should be good to go.
> Hope this helps,
>
> Josh