Colored rows in tables?

Forum Moderators: not2easy

Message Too Old, No Replies

Colored rows in tables?

Dexie

1:03 pm on Dec 8, 2004 (gmt 0)

Hi all, anyone know if theres any way of putting a table class in an ext css sheet, so that the table that it relates to gets every other row automatically colored.
Any ideas.
Sev.

Arno_Adams

1:28 pm on Dec 8, 2004 (gmt 0)

And these rows are pulled out of a database?
If so here's an ASP/VB solution:

Just define the classes in your external stylesheet.

HTH

Dexie

1:41 pm on Dec 8, 2004 (gmt 0)

Hi Arno, no, these are just ordinary rows in an rodinary table, and the rows are many, so trying to do this, so that it's easier for people to read across each row.
Any other ideas.
Sev.

Arno_Adams

3:58 pm on Dec 8, 2004 (gmt 0)

That's even easier!

<tr class="black>
<td>Lorem ipsum...</td>
</tr>
<tr class="white>
<td>Lorem ipsum...</td>
</tr>
<tr class="black>
<td>Lorem ipsum...</td>
</tr>
<tr class="white>
<td>Lorem ipsum...</td>
</tr>

etc...

Define the classes in your stylesheet.
Just like your other id/classes.

HTH, AA

Dexie

4:01 pm on Dec 8, 2004 (gmt 0)

Many thanks Arno, prob solved.

Sev.

Lance

4:27 pm on Dec 8, 2004 (gmt 0)

Well, if you have a nice looooong table and don't want to edit all the HTML, perhaps you could do something like this:

<style type="text/css"> 
tr 
{ 
BACKGROUND-COLOR: purple; 
COLOR: yellow; 
} 
tr.alt 
{ 
BACKGROUND-COLOR: yellow; 
COLOR: purple; 
} 
</style> <script type="text/javascript"> 
function ColorAltRows() { 
 tblRows = document.getElementsByTagName("tr"); 
 for (i = 1; i < tblRows.length; i = i + 2) { 
 tblRows[i].className = "alt"; 
 } 
} 
</script> 
<body onload="ColorAltRows();"> 
<table> 
 <tr> 
 <td>An ODD Row</td> 
 </tr> 
 <tr> 
 <td>An EVEN Row</td> 
 </tr> 
 <tr> 
 <td>An ODD Row</td> 
 </tr> 
 <tr> 
 <td>An EVEN Row</td> 
 </tr> 
 <tr> 
 <td>An ODD Row</td> 
 </tr> 
 <tr> 
 <td>An EVEN Row</td> 
 </tr> 
 <tr> 
 <td>An ODD Row</td> 
 </tr> 
 <tr> 
 <td>An EVEN Row</td> 
 </tr> 
</table> 
</body>

This will apply the tr style to all rows and then apply the tr.alt style to all the "even" rows (2, 4, etc.).

Hope this helps...

Dexie

4:41 pm on Dec 8, 2004 (gmt 0)

Phew, that is waaaaaay cool Lance, and it will defininitely save me a lot of bothering about in the html.
Many thanks.
Sev.

Arno_Adams

8:43 am on Dec 9, 2004 (gmt 0)

@Lance: That's a nifty solution.
Too bad it relies on client-side scripting.

But I'll save this little snippet, might come in handy in the future.

Lance

1:37 pm on Dec 9, 2004 (gmt 0)

Well, I figured it fit the bill of "enhancing appearance and degrading gracefully" in this context. Sure, there are ways, but if you've already got a very large static table and don't want to do a lot of recoding then this is just a quick easy drop-in solution.

Robin_reala

5:36 pm on Dec 9, 2004 (gmt 0)

I have no idea of the current status of this (IE definitely not, Moz I don't think so currently), but you could use the nth-child pseudoclass in your CSS. E.g.:

tr:nth-child(2n+1){background-color: blue;}