Table row Background-Color

[metro]

I need some help to get my head around this,
I want to implement alternate background colors in a table. I have found this..

table#t01 tr:nth-child(even) {
   background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color: #fff;
}
table#t01 th {
   color: white;
   background-color: black;
}

HERE:http://www.w3schools.com/html/html_tables.asp

but I'm unsure how to code it in RB. I'm using this table

html "</div><div>"


dim person$(1,3)
person$(0,1) = "Carl Gundel"
person$(0,2) = "Janet Terra"
person$(0,3) = "Stefan Pendl"
person$(1,1) = "USA"
person$(1,2) = "USA"
person$(1,3) = "Austria"

table  #ta, person$()

'Add a caption above the table
#ta caption("Run BASIC Community")

'add column names - one for each of the second dimensions
'in the array, beginning with 0
#ta columnnames("Name, Country")

'create a caption class with cssclass
cssclass "caption.a", "{ Background-Color: #C0C0C0; font: caption }"

'use caption.a class for this table caption
#ta captionclass("a")

'create a table class with cssclass
cssclass "table.mytable", "{ width: 300px; border: 4px ridge #CCF ;  border-spacing: 3px; row: Background-Color #C0C0C0 }"

'use table.mytable class for this table
#ta cssclass("mytable")

'create a table row class with cssclass
cssclass "tr.rowclass", "{ Background-Color: #666666 }"


'create a cell class (table data) with cssclass
cssclass "td.cellclass", "{ Background-Color: #FFDDBB}"   '#FFDDBB

'use td.cellclass for this table
#ta tdclass("cellclass")


'row class is used where thclass and tdclass are not set
'use tr.rowclass for this table
#ta trclass("rowclass")


'create a header class with cssclass
cssclass "th.header", "{ Background-Color: #FFEEDD }"

'use th.header class for this table
#ta thclass("header")

'if allclass is used, it supercedes other class assignments
'cssclass ".all", "{ Background-Color: #AAFFEE }"
'#ta allclass("all")

'cause the first column of names to become links
'the handler name must be in quotation marks
#ta link("Name","addGuy")

render #ta
wait

sub addGuy key$
print "You clicked: ";key$
person$(0,0) = "Rod Bird"
person$(1,0) = "Scotland"
end sub




Also , am I correct in assuming background colors at a "cell" level over ride "row" level CSS

appreciate any assistance

Laurie

[meerkat]

G'Day Laurie

I guess the best way to answer your question is to show the direct way of doing it without CSS.
I normally stay away from CSS unless I have something with a lot of repetition.
CSS for me, just adds another layer I have to manage in the code.

Yes a cell stuff overrides the row stuff.

Here is the what I think you are trying to do with CSS.

dim person$(1,3)
person$(0,1) = "Carl Gundel"
person$(0,2) = "Janet Terra"
person$(0,3) = "Stefan Pendl"
person$(1,1) = "USA"
person$(1,2) = "USA"
person$(1,3) = "Austria"

html "<center><TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 bgcolor='wheat'>" 'setup Table with border and background color wheat
html "<TR align=center BGCOLOR='tan'>" ' begin TR Table Row - make table row tan color
html "<TD colspan=3><h3>Run BASIC Community</TD>" ' TD Table Data  - span across 3 rows
html "</TR>" ' end TR Tabe Row
html "<TR>" ' begin new table row
html "<TH>Num</TD><TD>Name</TH><TH>Country</TH>" ' use TH to begin and end some Table Headings

for i = 1 to 3
if i AND 1 then
  html "<TR bgcolor=silver>" ' test for even or odd rows and color the TR Table Row
 else
  html "<TR>"
end if
html "<TD>"
link #lk, str$(i),[doClick] ' can click on Number
    #lk setkey(i)
html "</TD><TD>";person$(0,i);"</TD><TD>";person$(1,i);"</TD>" ' Each row id data in TD Table Data
html "</TR>"
next i
html "</TABLE>" ' End the table
wait
[doClick]
print "You Clicked Number:";EventKey$
wait


Have a great day..
Hope this helps..
Dan

[metro]

Thanks Dan
very helpful, I can now see how I can highlight rows
that meet a pre set criteria and I think your approach
is clearer to me that the path I was taking.

I Appreciate you taking the time

Laurie

[meerkat]

A lot of times I'm not exactly sure what the HTML web code should look like.
A trick is to design your layout with a web authoring tool. You can then copy the source to an editor and add the RB stuff to make it work with RB.

There are a lot of web design tools out there. A few are NVU, Kompozer, Coffee Cup, or pick one webdesign.about.com/od/windowshtmleditors/tp/free-windows-editors.htm


Hope this helps..
Dan