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

[Kevin Scholl]

Jack wrote:

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.

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*****@invali d.invalidwrites :

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.

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***********@c l.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.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]

Spartanicus <in*****@invali d.invalidwrites :

Jón Fairbairn <jo***********@ 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 Jo***********@c l.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.ukwri tes:

Spartanicus <in*****@invali d.invalidwrites :

Jón Fairbairn <jo***********@ 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 Jo***********@c l.cam.ac.uk