Hi,
think my biggest problem is that I don't know where to get started!!!
Should I design it first in an HTML table to get it how I would like it to look, and
THEN "transfer" it to CSS? I have done these spec tables in Adobe InDesign for our printed catalog that never got printed. I'd like to import these tables -
with no styles and then put it how it should look if possible, so I don't have to re-do all these tables, which took me some time! I just can't seem to
visualize how to make this work! I need easy explainations! LOL!
To answer all your questions would take a book and more time than I have at present 
Anyway I'll try and point you in the right direction. I've looked at the page you linked to in your post and seen the format you have. The data you have on the page is exactly suited to tables and that is what they were designed for. There doesn't seem much point in using css layout for the table data aspect of the site.
You can use tables but style them with CSS and have a much cleaner,lighter page than you have already.
I've taken one of your tables and styled it with css to give you some ideas of how to style it with css and you can compare the layout with your own. You may find the css a little confusing at first as it is quite complicated to begin with but makes sense after a while.
I've added features for accessibility which is the main reason for not using tables which may make the table look a bit complicated but its straight forward really. I've used table headers for the header and column and "scope" attributes to identify the cells etc.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table.tbl1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
width:100%;
}
table tr {font-size: xx-small;}
table.tbl1 .border {border-bottom:2px solid #999;width:5%}
table th.td1 {width:12%;text-align:center;}
table .td2 {width:5%}
table .td3 {width:9%}
table .td4 {width:12%}
table .td5 {width:13%}
table .td6 {width:12%}
table .td7 {width:8%}
table .td8 {width:15%}
table .td9 {width:6%}
table .td10{width:8%}
table.tbl1 .tblheaderborder th {border-bottom:2px solid blue;font-weight: bold;}
table.tbl1 .part {
font-size:x-small;
font-weight:bold;
color: #0033CC;
padding-left:5px;
}
table.tbl1 td.divider {
background:#dcdcdc;
font-style: italic;
padding-left:5px;
border-bottom:2px solid #999;
}
.table.tbl1 th {text-align:left}
table.tbl1 {border-collapse:collapse}
</style>
</head>
<body>
<table class="tbl1" cellspacing="0" cellpadding="0" summary="table for xxxx etc.">
<tr class="tblheaderborder">
<th scope="col" class="td1">Part #</th>
<th scope="col" class="td2">#of<BR>Cond.</th>
<th scope="col" class="td3">Nominal<BR>OD</th>
<th scope="col" class="td4">Conductor</th>
<th scope="col" class="td5">Insulation<BR> (type, OD)</th>
<th scope="col" class="td6">Shield</th>
<th scope="col" class="td7">Jacket<BR>Type</th>
<th scope="col" class="td8">Jacket<BR>Colors</th>
<th scope="col" class="td9">UL<BR>Type</th>
<th scope="col" class="td10">Approx.<BR>Weight</th>
</tr>
<tr>
<th scope="row" class="part">VHD1100</th>
<td>1</td>
<td>.405"</td>
<td>14 AWG<BR>Solid BC</td>
<td>Foam PE,<BR> .285"</td>
<td>95%TC Braid,<BR> 100% Foil</td>
<td>PVC</td>
<td style="whitespace:no-wrap">Black, others by spec. order</td>
<td>CMR</td>
<td>80lbs/Mft</td>
</tr>
<tr>
<td class="border"></td>
<td class="divider" colspan="9">Extended Distance RG11</td>
</tr>
<tr>
<th scope="row" class="part">VHD7000</th>
<td>1</td>
<td>.320"</td>
<td>16 AWG<BR> Solid BC</td>
<td>Foam PE,<BR>.223"</td>
<td>95% TC Braid,<BR> 100% Foil</td>
<td>PVC</td>
<td>Black, others by spec. order</td>
<td>CMR</td>
<td>60 lbs/Mft</td>
</tr>
<tr>
<td class="border"></td>
<td colspan="9" class="divider">Extended Distance RG7</td>
</tr>
<tr>
<th scope="row" class="part">VSD2001</th>
<td>1</td>
<td>.272"</td>
<td>18 AWG<BR>Solid BC</td>
<td>Foam PE,<BR>.180"</td>
<td>95% TC Braid,<BR>100% Foil</td>
<td>PVC</td>
<td>Black, Brown, Red,<BR>
Orange, Yellow, Green,<BR>
Blue, Violet, Grey, White</td>
<td>CMR</td>
<td>42 lbs/Mft</td>
</tr>
<tr>
<th class="border"></th>
<td class="divider" colspan="9">Low-loss RG6</td>
</tr>
<tr>
<th scope="row" class="part">VSD2001TS</th>
<td>1</td>
<td>.237"</td>
<td>18 AWG<BR>Solid BC</td>
<td>Foam PE,<BR>.170"</td>
<td>95% TC Braid,<BR>100% Foil</td>
<td>Plenum<BR>PVC</td>
<td>White</td>
<td>CMP</td>
<td>40 lbs/Mft</td>
</tr>
<tr>
<td class="border"></td>
<td class="divider" colspan="9">Low-loss RG6: Plenum</td>
</tr>
<tr>
<th scope="row" class="part">VPM2000</th>
<td>1</td>
<td>.242"</td>
<td>20 AWG<BR>Solid BC</td>
<td>Foam PE,<BR>.146"</td>
<td>95% TC Braid,<BR>100% Foil</td>
<td>PVC</td>
<td>Black, Brown, Red,<BR>
Orange, Yellow, Green,<BR>
Blue, Violet, Grey, White</td>
<td>CMR</td>
<td>35 lbs/Mft</td>
</tr>
<tr>
<td class="border"></td>
<td class="divider" colspan="9">Standard RG59</td>
</table>
</body>
</html>
Once you've put the css in an external file then the table is about a third of the size of your table and the presentation can be changed via the css file without touching the html.
However the rest of the layout can be a css layout as it is pretty straightforward although you will need to understand positioning with css layouts first.
There are no short cuts - you have to learn all the correct rules as well as all the browser bugs and quirks but in the end it will be worth it.
Hope that's given you something to work on.
Paul
Originally Posted by Paul O'B
Bookmarks