Zebra Table

I am trying to create a Zebra table where each Zebra "Strip" consists of two
rows. I am using a classical table to create the Zebra table. In my CSS, I
have

..dark {
background-color: #00FFFF;
}

..light {
background-color: #CCFFFF;
}

<tr class="light ">
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>

<tr class="dark">
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>

I would to wrap the two rows in a single definition, like with a <divor a
<spanbut having been able to make that work.

<div class="light">
<tr>
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
</div>

<div class="dark">
<tr>
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
</div>

Appreciate your help. Thanks...

Bruce

"Bruce A. Julseth" <julebj_nospam@bellsouth.netwrote in message
news:gNKjk.709$XT1.505@bignews5.bellsouth.net...I think I found the solution..

Adding

span.dark tr {
background-color: #00FFFF;

}

span.light tr {
background-color: #CCFFFF;
}

seems to be doing the trick.. Thanks...

"Bruce A. Julseth" <julebj_nospam@bellsouth.netwrote in message
news:ZVKjk.713$XT1.151@bignews5.bellsouth.net...Nope.. It didn't work.. Sorry. Can someone out there in CSS land help me?

Thanks and sorry for the false alarm. It worked fine in Dreamweaver, but
failed in Safari both on my localhost and when I upload it.

Bruce A. Julseth schrieb:Looks like these are header cells. So use the th element!
It can/will be difficult for a screen reader user to find out which
column header cells belong to which data cell. You can associate them
via td/@headers and th/@id.
Neither can div be a parent element of tr, ...
.... nor can span.

However, tbody can.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

"Johannes Koch" <koch@w3development.dewrote in message
news:488f80e0$0$4244$6e1ede2f@read.cnntp.org...Thanks for the suggestion on using <th>. I've never used tbody so I'll have
to study how to use it, as well as td/@headers and th/@id.
..
Hope this helps. If anyone else has a suggestion, please send them to me.

Bruce

Bruce A. Julseth schrieb:See the chapter on tables
(<http://www.w3.org/TR/html4/struct/tables.html>) in the HTML 4.01
specification for tbody
(<http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3>), th/@id and
td/@headers (<http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1>).

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

"Bruce A. Julseth" <julebj_nospam@bellsouth.netwrote in message
news:gNKjk.709$XT1.505@bignews5.bellsouth.net...No need to set the classes on all the <tr>s, just the odd ones is enough.
Style the <td>s not the <tr>s.

<table class="zebra">
<tr class="light">
<td>Blah</td>
</tr>
<tr class="light">
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
</tr>
</table>

..zebra td {
background-color: #CCFFFF;
}

..zebra .light td {
background-color: #00FFFF;
}

In article <g6o4ls$k30$1@registered.motzarella.org>,
"Nik Coughlin" <nrkn.com@gmail.comwrote:
....

As Nick shows, it is easy enough to implement with just css.
Depending on the nature of your table - how much would be lost if there
were no stripes if js were disabled or unavailable in rare cases - you
might also consider a javascript solution. It saves a lot of bother if
the table is big and changes a lot or if it is generated via php from
csv files on the server.

There is an example of this at

<http://khs.org.au/historian_database/tz.htmland the js at

<http://khs.org.au/historian_database/table_row_stripe.js>

You would need to adapt to your two rows at a time requirements.

--
dorayme

"dorayme" <doraymeRidThis@optusnet.com.auwrote in message
news:doraymeRidThis-CE3066.09453030072008@news-vip.optusnet.com.au...The <tbodysolutions does exactly what I want... BUT, I do have frequent
changes which make updating the table a 'bear!' So the JS suggestion is
welcomed. I had read about it somewhere. Thank to pointing me to an example.

Bruce

In article <WUPjk.915$Ep1.505@bignews2.bellsouth.net>,
"Bruce A. Julseth" <julebj_nospam@bellsouth.netwrote:
If you have frequent changes, you might consider letting some PHP build
your table from a simple csv file (which is just a text file that has
the data with commas after each item, row by row to correspond to tr).
Easier to maintain.

You make the HTML file with a bit of php in place of the table. Put it
on the server along with a plain text file .csv. I do this now and then
and it is quite a time saver. It is especially decent in that it lets a
client prepare the spreadsheet and export to csv format. And you, the
webmaster, simply upload the csv file (or you can get the client to do
this... but it is nice to keep a 'professional' eye on things, one must
be wary of giving clients too much power. They can get ideas that they
can do without you and then how do you pay advance tax bills?)

--
dorayme

"dorayme" <doraymeRidThis@optusnet.com.auwrote in message
news:doraymeRidThis-D221F1.12395930072008@news-vip.optusnet.com.au...Thanks for the suggestion. I'll take a look at doing just that.

Bruce