hi, i have to recreate a table with tabular data in it, and i was wondering if there is a way to do this without using a table. i thought of nesting divs, but if each div has a border, that's going to look wrong. the borders will overlap etc. so should i just use a table? here is the page im talking about. i have to reproduce something like this. any advice greatly appreciated. thanks. derek

http://www.loporchios.com/sweats.htm

Use a table, it's what they are meant for.

There really is no point in designing a special screwdriver when all you need is a hammer!

ok great thank you chris. derek

ya thats the only situation where you need to use a table :P its recommended lol anything else would just be a headache

Here's some cool css I use for tables. It's a good way to make cleaner borders on tables.

table.data{
border-top: solid 1px black;
border-left: solid 1px black;
}


table.datatd {
border-right: solid 1px black;
border-bottom: solid 1px black;
}

Tables I think use less code but if you want the speed and look of DIVs here's how I've done it in the past:

<div style="display:block;clear:both;">
   <div style="float:left;width:30%;">
      Col. One
   </div>
   <div style="float:left;width:50%;">
      Col. Two
   </div>
   <div style="float:right;width:20%;">
      Col. Three
   </div>
</div>

It is a lot of code so if you decide to use a table, I definitely wouldn't use the built in border because it does look messy. I also supplied some code below to show a better way to do borders in a table. Note that you must set the cellpadding and cellspacing to 0 for this to work. Your CSS code can add the padding back in.

.table {
   border-top: 1px solid black;
   border-left: 1px solid black;
}

.table td {
   border-bottom: 1px solid black;
   border-right: 1px solid black;
   text-align: center;
   padding: 3px;
}

<table border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
   <td width="150px">Sample One</td>
   <td width="250px">Sample Two</td>
   <td width="75px">Sample Three</td>
</tr>
<tr>
   <td width="150px">Sample One</td>
   <td width="250px">Sample Two</td>
   <td width="75px">Sample Three</td>
</tr>
</table>

Tables I think use less code

Oh that is SO not true! Tables and nested tables for layout are a NIGHTMARE and BLOAT a page considerably.

Tables are also a nightmare when it comes to updating and redesigning a site - I could change an entire site by changing ONE file - the CSS file. Lets see you do THAT with tables (hint -- you can't!).