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********@nothingisreal.comwrote:

>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********@nothingisreal.comwrote:

>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.comwrote:

>webdevout.net

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********@nothingisreal.comwrote:

>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_Header)
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.comwrote:

>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

[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{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

[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>';
}

[Kevin Scholl]

Jack wrote:

Spartanicus wrote:

>Tristan Miller <ps********@nothingisreal.comwrote:

>>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.

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/
ks*****@comcast.DELETE.net
------------------------------------------------------
Information Architecture, Web Design and Development
------------------------------------------------------
We are the music makers, and we are the dreamers of
the dreams...
================================================== ====

[Jón Fairbairn]

Spartanicus <in*****@invalid.invalidwrites:

Tristan Miller <ps********@nothingisreal.comwrote:

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.

Now there's a challenge! Readers with any sort of
intellectual squeamishness or taste should not follow this
link: <URL:
http://www.cl.cam.ac.uk/~jf15/StyleT...ows/index.html

>. Readers with certain sorts of visual disorders might have

trouble too, but it does seem to be valid CSS.

Notes:

* doesn't work in IE6 (something to do with table
borders, I suspect). Haven't tried any other IEs,
just recent versions of Firefox, Opera and Konqueror.

* relies on images, though only 156 bytes of them.

* probably missing some settings that browsers may set
to unexpected values, but as I'm accessing the
machine via VNC over a slow link from a computer
with a 256 colour display, I don't have the patience
to do any more...

--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2006-07-14)

[Spartanicus]

Jón Fairbairn <jo***********@cl.cam.ac.ukwrote:

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

Now there's a challenge! Readers with any sort of
intellectual squeamishness or taste should not follow this
link: <URL:
http://www.cl.cam.ac.uk/~jf15/StyleT...ows/index.html

http://homepage.ntlworld.ie/spartanicus/temp.png

--
Spartanicus

[Jón Fairbairn]

Spartanicus <in*****@invalid.invalidwrites:

Jón Fairbairn <jo***********@cl.cam.ac.ukwrote:

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

Now there's a challenge! Readers with any sort of
intellectual squeamishness or taste should not follow this
link: <URL:
http://www.cl.cam.ac.uk/~jf15/StyleT...ows/index.html

http://homepage.ntlworld.ie/spartanicus/temp.png

I forgot to say: it won't work if the original line spacing
isn't a whole number of pixels (I get the same effect as you
in firefox if I magnify the font size one step with Ctrl-+)
though I don't know if that was the problem for you, or if I
missed something else.

Mind you, I'd have thought that a non-integral line spacing
would produce undesirable effects and be something that a
browser wouldn't generally do, so I probably have forgotten
something, but I can't see what.

Also the Firefox and Opera I have behave differently if the
overall border of the table is an odd or even number of
pixels -- presumably one starts the background-image repeat
at the outside of the border and the other at the
inside. The effect is to give the odd/even colours a
different order in the two browsers.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2006-07-14)

[Jón Fairbairn]

Jón Fairbairn <jo***********@cl.cam.ac.ukwrites:

Spartanicus <in*****@invalid.invalidwrites:

Jón Fairbairn <jo***********@cl.cam.ac.ukwrote:

>Not possible with CSS 2.x, it requires classes.
>
>Now there's a challenge! Readers with any sort of
>intellectual squeamishness or taste should not follow this
>link: <URL:
>http://www.cl.cam.ac.uk/~jf15/StyleT...ows/index.html

http://homepage.ntlworld.ie/spartanicus/temp.png

I forgot to say: it won't work if the original line spacing
isn't a whole number of pixels (I get the same effect as you
in firefox if I magnify the font size one step with Ctrl-+)
though I don't know if that was the problem for you, or if I
missed something else.

Hmm. Did you use Firefox's Ctrl-+ (or View=>Text
Size=>Increase)?

I just went through the first eighteen font sizes for about
half of the fonts on my machine, setting them as the default
font while viewing the page, and it worked in every case,
whereas Ctrl-+ makes it fail. Evidently that doesn't simply
increase the sizes of the fonts (and associated spacings)
used (which is what I would infer from "Increase text size),
but does something strange instead.

Opera's Zoom option does something even stranger, in that it
neither simply magnifies the rendered page nor preserves the
CSS properties (the CSS says border-bottom: 1px, but at some
magnifications the bottom borders dividing the three cells
are different thicknesses).

--
Jón Fairbairn Jo***********@cl.cam.ac.uk