1 Very nifty

It would be quite easy to change that JS to support tables with 3 row colours (1,2,3,1,2,3,etc.) — heck, any number of colours! — instead of just two.

posted at 06:12 am on March 5, 2004 by Colin

2 PHP

PHP can handle this really well, and would be easy to modify to include more row colors, like Colin suggested. Here’s how I do it:

<?php
if (!isset($bgflag)) $bgflag = 0;
if ($bgflag == 1) { echo ‘<tr valign=“top”>’; $bgflag = 2;
} else { echo ‘<tr valign=“top” bgcolor=“E3ECED”>’; $bgflag = 1;
}
?>

posted at 06:23 am on March 5, 2004 by Dan

3 "We aren't applying classes"

re: “And because we aren’t applying classes to any of the table rows to achieve the effect, we can use classes for more specific uses”
Why not apply classes? The rows can quite hapily have more than one class (it just means that instead of saying element.className=‘foo’, you have to say element.className+=‘foo’, and check whether element.className already contains ‘foo’), and then you can control the styles from in your stylesheet, rather than by editing the Javascript. Moreover, you could control the styles separately for separate tables by just putting “table.specificId tr.odd { background-color: whatever; }” or similar. I think it’d be nicer if it automatically “stripe-ized” all tables with class “stripe”, too, rather than having to code a specific JS call in body.onload.
All those minor points aside, it’s a neat script; thanks!

posted at 06:44 am on March 5, 2004 by sil

4 You can have multiple classes per element

This article lists as an advantage of the technique that one “can now use classes for more specific uses in the table” when not using classes for striping. Keep in mind that you can have multiple classes per element, like <tr class=“even selected”> – in this case, CSS rules selecting “.even” and “.selected” will both be in effect.

posted at 06:47 am on March 5, 2004 by Tim

5 Wonderful idea

Great article. Thank you!

Sil makes a good point. Putting classes in the table is probably a good thing, as it will allow non-ECMA Script/DOM-aware browsers a chance to see the pretty colours.

Very handy indeed!

posted at 06:49 am on March 5, 2004 by CM Harrington

6 Nice!

This looks like a great technique to apply — I know I’ve been driven to fits before by needing to re-stripe an entire table because of shifting data (thank god for grep search/replace).

And you used Tegan & Sara in your example table! Sweet.

posted at 06:55 am on March 5, 2004 by Nate

7 CSS3 selector :nth-child(even) and :nth-child(odd)

Several CSS3 selectors do this exactly : tr:nth-child(even) and tr:nth-child(odd).

See http://www.w3.org/TR/css3-selectors/#nth-child-pseudo for more details.

Of course, no browsers are even close to support the spec (it’s a CR, written in 1999 !). Yawn.

posted at 07:04 am on March 5, 2004 by Ned Baldessin

8 With sorting...

I’ve used this code quite happily:

http://www.kryogenix.org/code/browser/sorttable/

It allows you to sort tables with Javascript (e.g., click on the “Last Name” header to sort by last name, click again to sort reverse, etc). One little problem is that when I’ve used it with server-generated odd/even row classes, the odds and evens aren’t correct after the sort, so it looks kind of funny. It’s not a big enough of a deal for me to go to a server-side solution (people will appreciate the speed of client-side sorting more than the aesthetics of the row colors) but it would be nice to combine the two. (Even better with some of the small modifications I made to it at http://ianbicking.org/software/sorttable-ib.js )

posted at 08:30 am on March 5, 2004 by Ian Bicking

9 Slightly modified

I ran into this issue while maintaining a table-based family e-mail address list. Rather than using an “even” flag, I use the modulo operator “%” to determine if the row count index is divisble by 2. I only use one table body for the list, so this works fine for me.

posted at 09:01 am on March 5, 2004 by Brahm Windeler

10 Consider your colors carefully

Just something I’ve noticed a lot with the very pale colors used in the examples and in a number of other striped tables I’ve seen recently: On LCD monitors, especially on notebooks, there’s little contrast between colors with similar luminance in the white and blue hues. In the examples shown in this article I could not see the difference between rows without assuming a different viewing angle. This proved true on both the laptops on my desk at the moment, and both my Mac and PC laptops at home.

posted at 09:19 am on March 5, 2004 by Evan Wired

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)