Coloring alternate rows in a table?

[willamowius]

I have a table in a handcoded page where I often add rows. I'd like to define a style so the browser givew a different shade to alternating rows.

I don't want to manually set a background to the TRs, because I'm inserting quite frequently.

Can that be done with a CSS?

[robjones]

How about defining a class and adding it to each alternating row?
like:
.trone{
background: #b6b6b6;
}
.trtwo{
background: #f5f5f5;
}
Then you would just add the class to the row as you add it:
<tr class="trtwo">

I know you still have to add the class to each row but I can't think of another way to have different properties for alternating rows.
I hope this helps.

[Shadows Papa]

robjones is correct.
My guestbook uses the following CSS

.listfont {
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-weight: normal;
background-color: #CCCCFF;
color: black;
text-align: left;
margin-top: 0;
margin-bottom: 0;
}

.listfont2{
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-weight: normal;
background-color: #FFFFCC;
color: black;
text-align: left;
margin-top: 0;
margin-bottom: 0;
}

The guestbook is generated via script - when you choose to view, each name/comment is placed in a table data cell/row of it's own, the script gives even numbered records one class, odd numbered records the other class. Thus every other record is a different color. So, it can even be done by automatically generated tables.

[willamowius]

My problem is that I'm inserting rows. After inserting one row, a row that was odd before, could now be an even row and I'll have to manually adjust the coloring of all following rows.

Could a CSS _automatically_ determine odd and even rows?

[robjones]

As far as I know there isn't a way for css to detect whether it's dealing with an even or odd row in a table, just to add the properties of whatever class or id is assigned to the <tr>

You could use scripting to detect whether it's even/odd, I'm not a big scripter so someone else may help you out there.

[DrDoc]

It can be done using JavaScript or :before/:after selectors in your CSS.

[DrDoc]

Actually, wait (trying to find a nifty page).
There is a way you can use CSS to "do stuff" to every nth element...

<added>Ok, here we go!
[w3.org...]

Examples:
tr:nth-child(2n+1) /* represents every odd row of a HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of a HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

It's CSS3, but there's a solution for it! :)

Doesn't work in IE though.</added>

[divaone]

there is a very simple way to do it if you are willing to use php. (this code was written by 'predator' at evilwalrus.com)

<table border="1">
<?php
$row = 25;
$x = 1;

while ($x <= $row) {
if($x%2): $color = "#FFFFFF"; else: $color = "#CCCCCC"; endif;
print "<tr><td style=\"background-color: ".$color."\">Row #".$x."</td></tr>\n";
$x++;
}
?>
</table>

hth

[bruhaha]

If you don't mind using some javascript, the free version of softcomplex.com's "tigra tables" makes it easy to alternate row colors. (Other options: change the color of the row you're hovering over, and set the color of a selected/clicked row.)

The downside is that this only works in recent versions of IE, not in Netscape or Opera at all. (The PRO version -for $29- improves on this, and adds other features, chiefly the ability to resort columns.)

[figment88]

If you are often inserting rows, I think it is time to step to a dynamic website.

If it is a now and then propositions, bit the bullet and copy-n-paste

[willamowius]

I went with DrDoc's suggestion and created a little Javscript and gave my table the id 'tabbed'. Works like a charm!

<script language="JavaScript">
<!--
var table = document.getElementById('tabbed');
var allTRs = table.getElementsByTagName("tr");
for (i=1; i <= allTRs.length ; i++) {
if (i % 2 == 1)
allTRs[i].style.backgroundColor = "#eeeeee";
}
-->
</script>

Thanks, guys!

[willamowius]

Ok, one little problem left:

With the above Javascript I have a hardcoded color in my page.

How can I assign a CSS defined color with Javascript?

[DrDoc]

Say that you want to use the #mydiv background color...

allTRs[i].style.backgroundColor = document.getElementById('mydiv').style.backgroundColor;

[Reflection]

There is a way you can use CSS to "do stuff" to every nth element...

...It's CSS3, but there's a solution for it!

Doesn't work in IE though

That is pretty cool. Too bad it will be 5 years before we can use it. Its amazing how fast things evolve in the computer industry but then you compare that to how slow things evolve in the web development dept :(.

[drbrain]

You can cut the number of classes in half if you let selectivity do the work:

<table class="rows">
<tr><td>...
<tr class=e><td>...
<tr><td>...
<tr class=e><td>...
...
</table>

.rows tr { background: #ccc } /* selectivity of 0-1-1 */
.rows .e { background: #fff } /* selectivity of 0-2-1 */

Now you've saved at least 7 * the number of rows bytes in your HTML. Probably more since you'll use friendly names like class="other".

Furthermore, you can specify only the overrides in the odd row, cutting down on bloat in your style sheet.

Combined with the :nth-child() selector mentioned by DrDoc, you get:

.rows tr { /* defaults */ }
.rows tr:nth-child(even) { /* overrides */ }

With no additional classes on your tr elements, saving at least 14 * the number of rows bytes!

[willamowius]

> allTRs[i].style.backgroundColor = "#eeeeee";

I think I'll do a

allTRs[i].className = "odd_row";

instead add define a CSS class od_row, so I can have all the color definitions in one place.