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]

Re: Table with rows of alternating colours

Tristan Miller <psychonaut@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]

Re: Table with rows of alternating colours

Spartanicus wrote:

Tristan Miller <psychonaut@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]

Re: Table with rows of alternating colours

Greetings.

In article <23a10$44e09f53 $8259c69c$21633 @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]

Re: Table with rows of alternating colours

"Rik" <luiheidsgoeroe @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]

Re: Table with rows of alternating colours

Spartanicus wrote:

Tristan Miller <psychonaut@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]

Re: Table with rows of alternating colours

Tristan Miller wrote:

Greetings.
>
In article <23a10$44e09f53 $8259c69c$21633 @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]

Re: Table with rows of alternating colours

Spartanicus wrote:

"Rik" <luiheidsgoeroe @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]

Re: Table with rows of alternating colours

Tristan Miller wrote:

Greetings.
>
In article <23a10$44e09f53 $8259c69c$21633 @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]

Re: Table with rows of alternating colours

Tristan Miller wrote:

Greetings.
>
In article <23a10$44e09f53 $8259c69c$21633 @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]

Re: Table with rows of alternating colours

Jack wrote:

Spartanicus wrote:

>Tristan Miller <psychonaut@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.

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@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]

Re: Table with rows of alternating colours

Spartanicus <invalid@invali d.invalidwrites :

Tristan Miller <psychonaut@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.

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 Jon.Fairbairn@c l.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2006-07-14)

[Spartanicus]

Re: Table with rows of alternating colours

Jón Fairbairn <jon.fairbairn@ cl.cam.ac.ukwro te:

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

Re: Table with rows of alternating colours

Spartanicus <invalid@invali d.invalidwrites :

Jón Fairbairn <jon.fairbairn@ cl.cam.ac.ukwro te:
>

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 Jon.Fairbairn@c l.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2006-07-14)

[Jón Fairbairn]

Re: Table with rows of alternating colours

Jón Fairbairn <jon.fairbairn@ cl.cam.ac.ukwri tes:

Spartanicus <invalid@invali d.invalidwrites :
>

Jón Fairbairn <jon.fairbairn@ cl.cam.ac.ukwro te:

>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 Jon.Fairbairn@c l.cam.ac.uk