Advanced CSS & Tables question

[DavidJA]

Hey all,

I need to produce many different HTML pages to display heirachal data rowsets, eg, nested tables with a 'parent table' and a 'child table'.

Because these tables need to be 'artisticly correct' with a lot of formatting we have created an external CSS file.

In this CSS file we have 2 classes, .parentTable and .childTable, and then the HTML tages like TH, THEAD, TBODY, TD, etc all have their formatting.

EG:

.parentTable TD
{
HEIGHT:25px;
BORDER-RIGHT: #003366 0pt;
BORDER-LEFT: #003366 1pt solid;
BORDER-TOP: #003366 2pt solid;
BORDER-BOTTOM: #003366 0pt;
PADDING:0px 5px
}


First of all I must say that this method is absolutly awsome, it will save sooo much time becaue in my HTML code all I say is <TABLE class=&quot;parentTable&quot;> and it is rendered exactly how I want.


My problem is that I want more control then this tho, I want to be able to say that &quot;if the TD is in the first column of the table then&quot; BORDER-LEFT: #003366 3pt solid; &quot;else&quot; BORDER-LEFT: #003366 1pt solid; or &quot;if the TD is in the first row of TBODY of the table then BORDER-TOP: #003366 0pt solid; &quot;else&quot; BORDER-TOP: #003366 1pt solid;

Can someone please tell me if this is possable, and if so, how (or provide a pointer to a good web site/book on this subject!)

Thanks in advance!

 

[NEVERSLEEP]

// this is a example i did for someone long ago
// hope this will help
var shitsu = new Array('ffff66','9966cc','996600','0066ff','00cc99','ff3300',
'ffff66','9966cc','996600','0066ff','00cc99','ff3300','ffff66','9966cc','996600','0066ff','00cc99','ff3300',
'ffff66','9966cc','996600','0066ff','00cc99','ff3300','ffff66','9966cc','996600','0066ff','00cc99','ff3300',
'ffff66','9966cc','996600','0066ff','00cc99','ff3300','ffff66','9966cc','996600','0066ff','00cc99','ff3300',
'ffff66','9966cc','996600','0066ff','00cc99','ff3300','ffff66','9966cc','996600','0066ff','00cc99','ff3300',
'ffff66','9966cc','996600','0066ff','00cc99','ff3300','ffff66','9966cc','996600','0066ff','00cc99','ff3300',
'ffff66','9966cc','996600','0066ff','00cc99','ff3300','ffff66','9966cc','996600','0066ff','00cc99','ff3300',
'ffff66','9966cc','996600','0066ff','00cc99','ff3300','ffff66','9966cc','996600','0066ff','00cc99','ff3300');

var pistsu = new Array('993333','990099','ff9966','660099','00ff00','00ffff','0000ff','ff0000','ffff00','ff00ff',
'993333','990099','ff9966','660099','00ff00','00ffff','0000ff','ff0000','ffff00','ff00ff',
'993333','990099','ff9966','660099','00ff00','00ffff','0000ff','ff0000','ffff00','ff00ff',
'993333','990099','ff9966','660099','00ff00','00ffff','0000ff','ff0000','ffff00','ff00ff',
'993333','990099','ff9966','660099','00ff00','00ffff','0000ff','ff0000','ffff00','ff00ff');

var crostu = new Array('000000','40ff40','802020','a00060','c000a0','000000','40ff40','802020','a00060','c000a0',
'000000','40ff40','802020','a00060','c000a0','000000','40ff40','802020','a00060','c000a0',
'000000','40ff40','802020','a00060','c000a0','000000','40ff40','802020','a00060','c000a0',
'000000','40ff40','802020','a00060','c000a0','000000','40ff40','802020','a00060','c000a0',
'000000','40ff40','802020','a00060','c000a0','000000','40ff40','802020','a00060','c000a0');

for (i=0;i<50;i++) {
document.write(&quot;<center><font color='#&quot; + pistsu + &quot;' size='4'>&quot;
document.write(&quot;Table number : &quot; + [i+1] + &quot; .</font></center><table width='100%' border='5' cellspacing='0' cellpadding='0'&quot
document.write(&quot;bordercolor='#&quot; + crostu + &quot;'><tr>&quot;
for (j=0;j<6;j++) {
document.write(&quot;<td align='center' bgcolor='#&quot; + shitsu[i+j] + &quot;'>&quot;
document.write(&quot;<font color='&quot; + shitsu[i+1+j] + &quot;'>&quot; + [j+36*i] + &quot;</font></td>&quot;
}
document.write(&quot;</tr>&quot;
document.write(&quot;<tr>&quot;
for (k=6;k<12;k++) {
document.write(&quot;<td align='center' bgcolor='#&quot; + shitsu[i+1+k] + &quot;'>&quot;
document.write(&quot;<font color='&quot; + shitsu[i+2+k] + &quot;'>&quot; + [k+36*i] + &quot;</font></td>&quot;
}
document.write(&quot;</tr>&quot;
document.write(&quot;<tr>&quot;
for (l=12;l<18;l++) {
document.write(&quot;<td align='center' bgcolor='#&quot; + shitsu[i+2+l] + &quot;'>&quot;
document.write(&quot;<font color='&quot; + shitsu[i+3+l] + &quot;'>&quot; + [l+36*i] + &quot;</font></td>&quot;
}
document.write(&quot;</tr>&quot;
document.write(&quot;<tr>&quot;
for (m=18;m<24;m++) {
document.write(&quot;<td align='center' bgcolor='#&quot; + shitsu[i+3+m] + &quot;'>&quot;
document.write(&quot;<font color='&quot; + shitsu[i+4+m] + &quot;'>&quot; + [m+36*i] + &quot;</font></td>&quot;
}
document.write(&quot;</tr>&quot;
document.write(&quot;<tr>&quot;
for (n=24;n<30;n++) {
document.write(&quot;<td align='center' bgcolor='#&quot; + shitsu[i+4+n] + &quot;'>&quot;
document.write(&quot;<font color='&quot; + shitsu[i+5+n] + &quot;'>&quot; + [n+36*i] + &quot;</font></td>&quot;
}
document.write(&quot;</tr>&quot;
document.write(&quot;<tr>&quot;
for (o=30;o<36;o++) {
document.write(&quot;<td align='center' bgcolor='#&quot; + shitsu[i+5+o] + &quot;'>&quot;
document.write(&quot;<font color='&quot; + shitsu[i+6+o] + &quot;'>&quot; + [o+36*i] + &quot;</td>&quot;
}
document.write(&quot;</tr></table><p>&quot;
} ---------------------------------------

someone knowledge ends where
someone else knowledge starts

 

[DavidJA]

Thanks for that,

That would certainly work, but as we are an ASP house we could also do the above in ASP using a lot of 'if' statments. Although what I am after is something very simple.

At the moment to write a very nicely formattted table to the screen all I need to do is:


<table width=100% cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;parentTable&quot;>
<thead>
<tr>
<th height=&quot;25&quot; width=&quot;200&quot;>Client Name</th>
<th width=&quot;250&quot;>Property / Project Order Details</th>
<th>Tasks</th>
</tr>
</thead>
<tbody>


and because parentTable is a class with HTML elements like hr and td defined the browser formats the page correctly.

Therefore I am really after a solution at the CSS level.

 

[NEVERSLEEP]

<tr>
<th> ?????? th ? not td ? didn't knew that one
</tr>

css level ...
.classname
{
HEIGHT:25px;
BORDER-RIGHT: #003366 0pt;
BORDER-LEFT: #003366 1pt solid;
BORDER-TOP: #003366 2pt solid;
BORDER-BOTTOM: #003366 0pt;
PADDING:0px 5px
}

<t? class=&quot;classname&quot;>

wont do the job ???
what the problem here ? i dont understand
---------------------------------------

someone knowledge ends where
someone else knowledge starts

 

[DavidJA]

TH is to THEAD what TD is to TBODY.

You example certainly will work, but I a wanting to not have to define <t? class=&quot;classname&quot;> for evert T? element in the page.

What I am trying to do is what CSS promises, seperate content from layout (or was that an XML promise?), so I can get any monkey off the street do <table class=xyc> and have the table render exactly the way I want it do.

I've actually found something that I think might help; either pseudo-classes (

http://www.hwg.org/resources/faqs/cssFAQ.html#pseudoel)

or row and column selectors (

http://www.westciv.com.au/style_master/academy/css_tutorial/selectors/row_selectors.html),

I'm putting my money on the second one but I will let you know what I find...