Css and styling tables

[Gman]

been having fun and games trying to get a table styled.


typical structure is

<table>
<tr>
<th>test</th>
<th>test2</th>
<th>test3</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>

what i'm trying to do is put a a 1px solid #000 border around each tr except the header ones.
The tr's need to have spacing between them and I don't want the order showing within the tr i.e. on the td's. Somthing like so

The only way I can do it it seems is to wrap each tr in a seperate table but I want to keep the code as clean as possible.

Oh and this must work in IE6

 

[Gman]

Scrap this think i've found a work around by adding a seperate style to the first and last td in each row. in order to add the end borders.

Anyone else got any other easier sugestions feel free to post away

 

[Lightnix]

Why not have the tr with the header cells just have its own styling? (eh, not wording things well today - it's too hot, the header row? That works)

So:

<table>
<tr style="background:0; border:0">
<th>test</th>
<th>test2</th>
<th>test3</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>

 

[Gman]

???? not sure what you mean.

in the picture the header row has no style all the normal rows need to have the style as in the picture.

Just tried my theory and it works and doesn't work seems IE6 doesn't work with the "border-spacing" tag so I can't find a way to space the tr's out like in the picture. Any ideas ?

 

[Septh]

Good ole IE, use divs?
4 Divs, top margin on them all with 1 table in each, use the same COL widths for all the tables, and do the same style on them that worked before.
There is no easy way to put borders on TD, other than on each on them, I tend to setup a stylesheet with a load of predefined borders for each type of Cell, eg TopLeft, TopMiddle, TopRight, Left, Right, each one having the needed border settings