Table with rows of alternating colours

[Tristan Miller]

Greetings.

Is it possible with CSS to have an HTML <tablesuch that even-numbered
<trrows have one background colour, and odd-numbered <trrows 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 <trelements 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

[Spartanicus]

Tristan Miller <ps********@not hingisreal.comw rote:

>Is it possible with CSS to have an HTML <tablesuch that even-numbered
<trrows have one background colour, and odd-numbered <trrows 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 <trelements 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

[Rik]

Spartanicus wrote:

Tristan Miller <ps********@not hingisreal.comw rote:

>Is it possible with CSS to have an HTML <tablesuch that
even-numbered <trrows have one background colour, and odd-numbered
<trrows 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 <trelements
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

[Tristan Miller]

Greetings.

In article <23************ *************** @news1.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

[Spartanicus]

"Rik" <lu************ @hotmail.comwro te:

>webdevout.ne t

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

--
Spartanicus

[Jack]

Spartanicus wrote:

Tristan Miller <ps********@not hingisreal.comw rote:

>Is it possible with CSS to have an HTML <tablesuch that even-numbered
<trrows have one background colour, and odd-numbered <trrows 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 <trelements 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/

[Blue Apricot]

Tristan Miller wrote:

Greetings.

In article <23************ *************** @news1.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

--
_

Here is an ASP snippet... basically, you make two classes (row_on,
row_off) which are in an array, and then reference the correct one by
using the Modulus thingy, which will give you 0 or 1, as you loop
through the collection of rows (recordset in this case).

I am sure it is very similar in PHP.

<%
Dim Row_Class(1)
Row_Class(0) = "row_on"
Row_Class(1) = "row_off"
%>
<HTML>
-----etc..
-----Then in Body, use this snip after getting a recordset or...
<BODY>
<table>
<%
If Not rsData.BOF Or Not rsData.EOF Then
r=0
Do While rsData.EOF <True
TempStr = TempStr & "<tr class=" & Row_Class(r Mod 2) & ">"
r = r+1
For i = 0 to UBound(Col_Head er)
TempStr = TempStr & "<td>" & rsData.fields(i ) & "</td>"
Next
TempStr = TempStr & "</tr>" & VbCrLf
rsData.MoveNext
Loop
Response.Write( TempStr)
End If
%>
</table>
</BODY>
</HTML>

[Rik]

Spartanicus wrote:

"Rik" <lu************ @hotmail.comwro te:

>webdevout.ne t

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

[Rik]

Tristan Miller wrote:

Greetings.

In article <23************ *************** @news1.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{backgro und-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{backgro und-color:#FFFF88;}

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

Grtz,
--
Rik Wasmus

[Nik Coughlin]

Tristan Miller wrote:

Greetings.

In article <23************ *************** @news1.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>';
}