Table with rows of alternating colours

Greetings.

Is it possible with CSS to have an HTML <table> such that even-numbered
<tr> rows have one background colour, and odd-numbered <tr> rows have
another background colour? This makes wide tables easier to read.

I would like this to work by applying a CSS class to only the <table>
element. Applying two different classes to alternate <tr> elements is
undesirable, as then it would be impossible to add, delete, or sort table
rows without ruining the colour alternation.

If someone could point me to an example, I would be much obliged.

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

Tristan Miller <psychonaut (AT) nothingisreal (DOT) com> wrote:

Is it possible with CSS to have an HTML <table> such that even-numbered
tr> rows have one background colour, and odd-numbered <tr> rows have
another background colour? This makes wide tables easier to read.

I would like this to work by applying a CSS class to only the <table
element. Applying two different classes to alternate <tr> elements is
undesirable, as then it would be impossible to add, delete, or sort table
rows without ruining the colour alternation.

Not possible with CSS 2.x, it requires classes.

It is part of CSS3, but afaik the required selectors haven't been
implemented by anyone yet.

--
Spartanicus

Spartanicus wrote:

Tristan Miller <psychonaut (AT) nothingisreal (DOT) com> wrote:

Is it possible with CSS to have an HTML <table> such that
even-numbered <tr> rows have one background colour, and odd-numbered
tr> rows have another background colour? This makes wide tables
easier to read.

I would like this to work by applying a CSS class to only the <table
element. Applying two different classes to alternate <tr> elements
is undesirable, as then it would be impossible to add, delete, or
sort table rows without ruining the colour alternation.

Not possible with CSS 2.x, it requires classes.

It is part of CSS3, but afaik the required selectors haven't been
implemented by anyone yet.

Yup:
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
According to webdevout.net not supported.
I usually let PHP build my lists/tables, and echo a class 'even' every other
element.

Grtz,
--
Rik Wasmus

Greetings.

In article <23a10$44e09f53$8259c69c$21633 (AT) news1 (DOT) tudelft.nl>, Rik wrote:

I usually let PHP build my lists/tables, and echo a class 'even' every
other element.

I'm completely new to PHP; I've ordered some O'Reilly books but they are
yet to arrive. Any chance you (or anyone else) could post some sample
code for constructing such a table?

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

"Rik" <luiheidsgoeroe (AT) hotmail (DOT) com> wrote:

webdevout.net

Haven't seen that resource mentioned before. Seems like a good quality
and well researched piece of work.

--
Spartanicus

Spartanicus wrote:

Tristan Miller <psychonaut (AT) nothingisreal (DOT) com> wrote:

Is it possible with CSS to have an HTML <table> such that even-numbered
tr> rows have one background colour, and odd-numbered <tr> rows have
another background colour? This makes wide tables easier to read.

I would like this to work by applying a CSS class to only the <table
element. Applying two different classes to alternate <tr> elements is
undesirable, as then it would be impossible to add, delete, or sort table
rows without ruining the colour alternation.

Not possible with CSS 2.x, it requires classes.

Or Javascript.


--
Jack.
http://www.jackpot.uk.net/

Spartanicus wrote:

"Rik" <luiheidsgoeroe (AT) hotmail (DOT) com> wrote:

webdevout.net

Haven't seen that resource mentioned before. Seems like a good quality
and well researched piece of work.

Yup, I've seen the link here somewhere about 2 weeks ago, and was happily
surprised about the depth of checking, and it's even up-to-date (I was very
fed up with searches that mentioned IE until 5.0, Opera until 6.0 etc..).

All in all a very good site indeed. Thanks to the one who mentioned it, whom
I can't remember.

Grtz,
--
Rik Wasmus

Tristan Miller wrote:

Greetings.

In article <23a10$44e09f53$8259c69c$21633 (AT) news1 (DOT) tudelft.nl>, Rik
wrote:
I usually let PHP build my lists/tables, and echo a class 'even'
every other element.

I'm completely new to PHP; I've ordered some O'Reilly books but they
are yet to arrive. Any chance you (or anyone else) could post some
sample code for constructing such a table?

Well, lets say you already have an array (or a while loop fetching db
results):

<?php
$i=1;
foreach($array as $row){
$class = ($i % 2 == 0)? ' class="even"':'';
echo "<tr{$class}>";
// or
echo "<li{$class}>";
// and some further code producing the content
$i++;
}
?>

and in css ad one of the applicable stylerules:

td{background-color:#FFFFFF;}
tr.even td{background-color:#FFFF88;}
li{background-color:#FFFFFF;}
li.even{background-color:#FFFF88;}

possibly even for a specific id'ed list/table:

#specific td{background-color:#FFFFFF;}
#specific tr.even td{background-color:#FFFF88;}
#specific li{background-color:#FFFFFF;}
#specific li.even{background-color:#FFFF88;}

So other lists/tables won't be affected by mistake.

Grtz,
--
Rik Wasmus

Tristan Miller wrote:

Greetings.

In article <23a10$44e09f53$8259c69c$21633 (AT) news1 (DOT) tudelft.nl>, Rik
wrote:
I usually let PHP build my lists/tables, and echo a class 'even'
every other element.

I'm completely new to PHP; I've ordered some O'Reilly books but they
are yet to arrive. Any chance you (or anyone else) could post some
sample code for constructing such a table?

Regards,
Tristan

Table is an array.

$alternator = -1;
$rowClass[ -1 ] = 'class="even"';
$rowClass[ 1 ] = 'class="odd"';

foreach( $table as $row ) {
$alternator *= -1;
echo '<tr ' . $rowClass[ $alternator ] . '>' . $row . '</tr>';
}

Jack wrote:

Spartanicus wrote:
Tristan Miller <psychonaut (AT) nothingisreal (DOT) com> wrote:

Is it possible with CSS to have an HTML <table> such that even-numbered
tr> rows have one background colour, and odd-numbered <tr> rows have
another background colour? This makes wide tables easier to read.

I would like this to work by applying a CSS class to only the <table
element. Applying two different classes to alternate <tr> elements is
undesirable, as then it would be impossible to add, delete, or sort
table
rows without ruining the colour alternation.

Not possible with CSS 2.x, it requires classes.

Or Javascript.

Indeed. Incredibly easy, in concert with CSS, using the JQuery library:

http://15daysofjquery.com/table-striping-made-easy/5/

[ Ref: http://jquery.com/ ]

--

*** Remove the DELETE from my address to reply ***

================================================== ====
Kevin Scholl http://www.ksscholl.com/
kscholl (AT) comcast (DOT) DELETE.net
------------------------------------------------------
Information Architecture, Web Design and Development
------------------------------------------------------
We are the music makers, and we are the dreamers of
the dreams...
================================================== ====