Changing odd row colors in tables

I use the following CSS code to color a table to display a number of different data pieces.

 cssclass "caption","{ color: white; background:#0000FF; font-family:times; font-size:12pt; Font-Weight: Bold }" 
 cssclass "columnnames","{ color:black; background:white; font-family:times; font-size:12pt }" 
 cssclass "table","{ border: 3px ridge #DDF; border-spacing: 4px}" 
 cssclass "tr","{ background: #FFCC66; Color: Blue}" 
 cssclass "td", "{ Text-Align: Center; font-family:times; font-size:12pt; Font-Weight: Bold }" 
 cssclass "span.row-odd tr", "{ font-weight: bold; background: #FF9933; Color: Black }" 'This line doesn't work in IE8

The last line (I think Carl guided me to a few years ago) is to have the odd rows formatted differently than the even rows. This worked great in IE6 and allowed the data to be easily discernable as seen in the first picture. Now that most of the PC's in our facility have updated to IE8, that command no longer works and leaves a very busy looking table that's hard to pull info from. Does anyone know of an updated css command that will achieve the same result?

Table in Internet Explorer 6


Table in Internet Explorer 8


Any help would be appreciated.

John "Psycho" Siejkowski

The problem is the SPAN tag used for the odd rows.

Current <span class="row-odd"><tr><td></td></tr></span>
Better <tr class="row-odd"><td></td></tr>

So you might be better return to manual coding of the table instead of using the table command.

There is an additional change needed after switching cssclass ".row-odd", "{ font-weight: bold; background: #FF9933; Color: Black }"

Example

dim cell$(10,5)

for row = 0 to 5
 for column = 0 to 10
 cell$(column, row) = "at "; column; "/"; row
 next
next

cssclass "table", "{ border-collapse:collapse;}"
cssclass "table, tr, td", "{ border: 1px solid;}"
cssclass ".row-odd", "{ background: gray;}"

html "<table>"

for row = 0 to 5
 if row mod 2 = 0 then
 html "<tr>"
 else
 html "<tr class='row-odd'>"
 end if

 for column = 0 to 10
 html "<td>"; cell$(column, row); "</td>"
 next

 html "</tr>"
next

html "</table>"
end

Super!
Thank you for the example Stefan :)

I've stated many times that my html knowledge is very little so I stay away from creating tables with it whenever I can. You not only showed me how to get the formatting I need but also a much easier way to design the table to begin with (at least for using html). I fiddled with and modified your code a bit and got exactly the result I wanted, including the caption.

now if they would only make simple tables that easy to have the rows formatted differently...... ;)

Thanks again.

John "Psycho" Siejkowski

It is just as simple as checking the RB generated source code of the page.
To add a caption you would only need to add the CAPTION tags after the TABLE open tag.

I think Carl might add a table method to style odd and even rows individually.