HighDots Forums  

Zebra Table

Go Back HighDots Forums Web-authoring Cascading Style Sheets Zebra Table

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Zebra Table in the Cascading Style Sheets forum.



Reply
Page 1 of 2 1 2 >
 
Thread Tools Display Modes
  #1  
Old   
Bruce A. Julseth
 
Posts: n/a

Default Zebra Table - 07-29-2008 , 04:11 PM





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 <div> or a
<span> but 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



Reply With Quote
  #2  
Old   
Bruce A. Julseth
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 04:20 PM






"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote

Quote:
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 <div> or
a <span> but 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
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...




Reply With Quote
  #3  
Old   
Bruce A. Julseth
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 04:28 PM



"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote

Quote:
"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote in message
news:gNKjk.709$XT1.505 (AT) bignews5 (DOT) bellsouth.net...
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 <div> or
a <span> but 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


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




Reply With Quote
  #4  
Old   
Johannes Koch
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 04:43 PM


Bruce A. Julseth schrieb:
Quote:
"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote in message
news:gNKjk.709$XT1.505 (AT) bignews5 (DOT) bellsouth.net...

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
Looks like these are header cells. So use the th element!

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

Quote:
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
Neither can div be a parent element of tr, ...

Quote:
I think I found the solution..

Adding

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

}
.... nor can span.

However, tbody can.

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


Reply With Quote
  #5  
Old   
Bruce A. Julseth
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 05:11 PM



"Johannes Koch" <koch (AT) w3development (DOT) de> wrote

Quote:
Bruce A. Julseth schrieb:
"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote in message
news:gNKjk.709$XT1.505 (AT) bignews5 (DOT) bellsouth.net...

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

Looks like these are header cells. So use the th element!

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

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.

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

Neither can div be a parent element of tr, ...

I think I found the solution..

Adding

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

}

... nor can span.

However, tbody can.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
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




Reply With Quote
  #6  
Old   
Johannes Koch
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 06:07 PM


Bruce A. Julseth schrieb:
Quote:
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.
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.)


Reply With Quote
  #7  
Old   
Nik Coughlin
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 06:13 PM


"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote

Quote:
I am trying to create a Zebra table where each Zebra "Strip" consists of
two rows.
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;
}



Reply With Quote
  #8  
Old   
dorayme
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 07:45 PM


In article <g6o4ls$k30$1 (AT) registered (DOT) motzarella.org>,
"Nik Coughlin" <nrkn.com (AT) gmail (DOT) com> wrote:

Quote:
"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote in message
news:gNKjk.709$XT1.505 (AT) bignews5 (DOT) bellsouth.net...
I am trying to create a Zebra table where each Zebra "Strip" consists of
two rows.

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.

....

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


Reply With Quote
  #9  
Old   
Bruce A. Julseth
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 10:01 PM



"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote

Quote:
In article <g6o4ls$k30$1 (AT) registered (DOT) motzarella.org>,
"Nik Coughlin" <nrkn.com (AT) gmail (DOT) com> wrote:

"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote in message
news:gNKjk.709$XT1.505 (AT) bignews5 (DOT) bellsouth.net...
I am trying to create a Zebra table where each Zebra "Strip" consists of
two rows.

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.

...

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.html> and 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
The <tbody> solutions 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




Reply With Quote
  #10  
Old   
dorayme
 
Posts: n/a

Default Re: Zebra Table - 07-29-2008 , 10:39 PM


In article <WUPjk.915$Ep1.505 (AT) bignews2 (DOT) bellsouth.net>,
"Bruce A. Julseth" <julebj_nospam (AT) bellsouth (DOT) net> wrote:

Quote:
"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in message

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


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


Reply With Quote
Reply
Page 1 of 2 1 2 >

« Previous Thread | Next Thread »



Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.


C++ Forums - MySQL Forums - Databases Forums - Hardware Forums - Borland Forums - Java Forums - Dotnet Forums - HighDots Forums - Archive - Top