Tables and CSS

[Malcolm Collett]

This code works the way I want it to, provided I have the cellspacing="0" in
the table tag. If I take this out, then I get a 1 pixel gap in the border
above and below the <th> row.

What do I put into the style sheet so that I can get rod of the
cellspacing="0"? I have tried margin:0 and padding:0 in various places, but
it doesn't help.

Thanks
Malcolm

<h4><a name="Beginners">Beginners</h4></a></h4>
<table class="restable" cellspacing="0">
<tbody class="restbody">
<tr class="restr">
<th class="resthhandler">Handler</th>
<th class="resthdog">Dog</th>
<th class="resthpercent">%</th>
</tr>
<tr class="restr">
<td class="restdhandler">Joe Bloggs</td>
<td class="restddog">Rover</td>
<td class="restdpercent"> 96.0</td>
</tr>
</tbody>
</table>
<br>
<div class="resdivback"><a class="BodySmall" href="#">Back To Top</a></div>

The style sheet contains this:
table.restable {}
tbody.restbody {}
tr.restr {}
th.resthhandler {width:170px; border-top:thin solid black;
border-bottom:thin solid black;}
th.resthdog {width:100px; border-top:thin solid black; border-bottom:thin
solid black;}
th.resthpercent {width: 45px; border-top:thin solid black;
border-bottom:thin solid black;}
td.restdhandler {width:170px;}
td.restddog {width:100px;}
td.restdpercent {width: 45px;}
resdivback {}

 

[Steve Pugh]

This code works the way I want it to, provided I have the cellspacing="0" in
the table tag. If I take this out, then I get a 1 pixel gap in the border
above and below the <th> row.

What do I put into the style sheet so that I can get rod of the
cellspacing="0"? I have tried margin:0 and padding:0 in various places, but
it doesn't help.

border-spacing: 0;

Not supported by some browsers, including all versions to date of IE.

Though you may find that border-collapse: collapse; has the effect you
want. Obviously collapse borders must have zero space between them,
but a 2px border next to a 2px border will now appear as 2px
(collapsed) rather than s 4px. From the look of the code provided this
shouldn't matter in your case.

Steve

 

[Malcolm Collett]

What do I put into the style sheet so that I can get rod of the

Though you may find that border-collapse: collapse; has the effect you
want.

Thanks Steve
border-collapse did exactly what I want.

Malcolm

 

[DU]

This code works the way I want it to, provided I have the cellspacing="0" in
the table tag. If I take this out, then I get a 1 pixel gap in the border
above and below the <th> row.

What do I put into the style sheet so that I can get rod of the
cellspacing="0"?

Border-spacing is not supported by all browsers but cellspacing="0" is
well supported and is not deprecated. So it's an attribute to use here
for good reasons.

I have tried margin:0 and padding:0 in various places, but

it doesn't help.

Thanks
Malcolm

<h4><a name="Beginners">Beginners</h4></a></h4>

<table class="restable" cellspacing="0">
<tbody class="restbody">
<tr class="restr">
<th class="resthhandler">Handler</th>
<th class="resthdog">Dog</th>
<th class="resthpercent">%</th>
</tr>
<tr class="restr">
<td class="restdhandler">Joe Bloggs</td>
<td class="restddog">Rover</td>
<td class="restdpercent"> 96.0</td>
</tr>
</tbody>
</table>
<br>
<div class="resdivback"><a class="BodySmall" href="#">Back To Top</a></div>

The style sheet contains this:
table.restable {}

class restable is not defined anywhere.

tbody.restbody {}
tr.restr {}
th.resthhandler {width:170px; border-top:thin solid black;
border-bottom:thin solid black;}
th.resthdog {width:100px; border-top:thin solid black; border-bottom:thin
solid black;}
th.resthpercent {width: 45px; border-top:thin solid black;
border-bottom:thin solid black;}
td.restdhandler {width:170px;}
td.restddog {width:100px;}
td.restdpercent {width: 45px;}
resdivback {}

IMO, your style sheet is redundant, not well optimized, compact-formed,
too many classes declared and defined. How about:

#idTable
{
table-layout:fixed;
border-collapse:collapse;
}

#idTable th
{
border-top:thin solid black;
border-bottom:thin solid black;
}

(...)

<table id="idTable" cellspacing="0">
<col width="170"><col width="100"><col width="45">
<tbody>
<tr>
<th>Handler</th>
<th>Dog</th>
<th>%</th>
</tr>
<tr>
<td>Joe Bloggs</td>
<td>Rover</td>
<td> 96.0</td>
</tr>
</tbody>
</table>

Not tested.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Malcolm Collett]

Thanks for taking time to give such a detailed reply.

Border-spacing is not supported by all browsers but cellspacing="0" is
well supported and is not deprecated. So it's an attribute to use here
for good reasons.

Not the answer I was hoping to hear. But I think I will drop the
border-spacing and go back to cellspacing="0".

Improper nesting here. One extra </h4>

Fixed. (Hadn't noticed it - the browser didn't mind at all!)

class restable is not defined anywhere.

Actually there's a reason for it. I have created a small html code
generator. This generates the table html. It will be given to someone who
has the data. I will then be given the html containing the data. Once
deployed, I can't easily change the generated html (it isn't deployed yet).
A series of about 20 or 30 tables will be created.

I will then use CSS for the layout of the tables. That is why I was wanting
to get rid of the cellspacing="0" in the html.

IMO, your style sheet is redundant, not well optimized, compact-formed,
too many classes declared and defined. How about:

Yes, there is redundancy. I have put plenty of classes into the html. In the
CSS, not all of them are used. But they are there if I need them.

#idTable
{
table-layout:fixed;
border-collapse:collapse;
}

#idTable th
{
border-top:thin solid black;
border-bottom:thin solid black;
}

(...)

<table id="idTable" cellspacing="0">
<col width="170"><col width="100"><col width="45">
<tbody>
<tr>
<th>Handler</th>
<th>Dog</th>
<th>%</th>
</tr>
<tr>
<td>Joe Bloggs</td>
<td>Rover</td>
<td> 96.0</td>
</tr>
</tbody>
</table>

I will have a look at this. Especially the table-layout:fixed.

Thanks

Malcolm

 

[Sid Ismail]

: But I think I will drop the
: border-spacing and go back to cellspacing="0".

Wise man. Tables are not and never ever will be deprecated. And
cellspacing goes to tables as love is to marriage.

Sid

 

[William Tasso]

Wise man. Tables are not and never ever will be deprecated. And
cellspacing goes to tables as love is to marriage.

like a fish needs a bike?