Hi Kathleen, that is an impressive Table-free table and I love the way you got the border by using different sized boxes. Might try that because it seems a better way to get the borders right.
After sitting up into the wee smalls pondering how to do it.
Here is what I did after finding a clue on a mailing list thanks to Google.
<div class="cellblock"><!-- This wraps the cellblock and provides a left margin to help center the block -->
<!-- Header cells with Left borders: T,L,B and Right borders: T,R,L,B -->
<div class="topcell-L">Item</div><div class="topcell-R">Price</div><br clear="left">
<!-- data cells with Left borders: L,B and Right borders: R,L,B -->
<div class="cell-L">Alfalfa sprouts</div><div class="cell-R">$1.50 per punnet</div><br clear="left">
<div class="cell-L">Apples, Bonza</div><div class="cell-R">$5.99 per Kg</div><br clear="left">
<div class="cell-L">Apples, Golden Delicious</div><div class="cell-R">$4.99 per Kg</div><br clear="left">
<div class="cell-L">Artichoke hearts. pickled</div><div class="cell-R">$17.99 per Kg</div><br clear="left">
<!-- data cell with closing thicker borders, Left borders: L,B and Right borders: R,L,B -->
<div class="cell-LB">Avocados, dark, large</div><div class="cell-RB">2 for $3.50</div><br clear="left">
</div>
Because of the complexity I made a separate stylesheet which is called in only by the Produce page. I called it Cellblock.
/* This stylesheet has been designed for Joe's Online Shop */
/* by Ian Loxton and last updated at 01:51, 22 August 2005 */
/* This is an extra sheet supporting just the cellblock elements */
/* I certify that this sheet this is all my own work */
.cellblock {
float: none;
margin-left: 2%;
}
.topcell-L { /* heading cell with borders at top and left */
float: left;
width: 47%; /* allows for IE to botch up the widths due to the padding values */
font-weight : bold;
border-left : medium solid #b2d8b2;
border-top : medium solid #b2d8b2;
border-bottom : medium solid #b2d8b2;
text-align: left;
padding-left: 2%;
}
.topcell-R { /* heading cell with borders at top, left and right */
float: left;
width: 48%;
border-top : medium solid #b2d8b2;
border-bottom :medium solid #b2d8b2;
border-right: medium solid #b2d8b2;
border-left : thin solid #b2d8b2;
font-weight : bold;
text-align: center;
}
.cell-L { /* data cell with borders at bottom and left */
float: left;
width: 47%; /* allows for IE to botch up the widths due to the padding values */
border-left : medium solid #b2d8b2;
border-bottom : thin solid #b2d8b2;
text-align: left;
padding-left: 2%;
}
.cell-R { /* data cell with borders at left, bottom and right */
float: left;
width: 48%;
border-left : thin solid #b2d8b2;
border-bottom : thin solid #b2d8b2;
border-right: medium solid #b2d8b2;
text-align: center;
}
.cell-LB { /* bottom row data cell with borders at bottom and left */
float: left;
width: 47%; /* allows for IE to botch up the widths due to the padding values */
border-left : medium solid #b2d8b2;
border-bottom : medium solid #b2d8b2;
text-align: left;
padding-left: 2%;
}
.cell-RB { /* bottom row data cell with borders at left, bottom and right */
float: left;
width: 48%;
border-left : thin solid #b2d8b2;
border-bottom: medium solid #b2d8b2;
border-right: medium solid #b2d8b2;
text-align: center;
}
So far it works fine in IE 6, FF 1.06 and Opera 8.0 and at resolutions from 640 up to 1280. I don't have the older browsers to try it out but the page verifies as HTML 4.01 and the CSS verifies as well.
It isn't anywhere near as pretty as the W3C stuff or your solution but hey, it works!
(PS: this is a copy of my post in INETPUB)