convert a html table to div css layout

[proxyHunter]

hi can anyone help

i want to convert the common html table code below

<table width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

to a <div> controlled layout using css?

[zollerwagner]

Hi,

Your table is pretty simple. How you approach the problem depends on what you want these cells look like.

One way to research this would be to do a site search here on:
3 column css layout

You'll see a lot of posts on this. I've been working on a 2-column layout with header and footer using css. It's a real headache, but seems worth the struggle.

3-column layouts are supposedly even more problematic, so you'll want to read a few CSS books before you get going, because it's tricky, and the many of the "obvious" solutions don't work.

You might also look at these sites:
http://www.sitepoint.com/article/379/14
http://www.glish.com/css/
http://www.alistapart.com/articles/flexiblelayouts/
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml
http://www.ssi-developer.net/main/templates/
http://www.csszengarden.com/

Of course, there's a lot more than that, too, because this has been a hot topic.

Be sure to test other people's designs to be sure they don't fall apart when you reduce the size the browser window. And you'll want to put some content into them to see if they act as you expect them to. Even some of the examples I give above didn't work for me.

Good luck!

[Rincewind]

People get hung up on complex layouts to emulate tables. If you want something that looks exactly like a table then your probably best using a table. The 3 column or 2 column grail that often discussed here are only complex because the designer is trying to do something fancy like position the footer in a certain way or have one or two fixed width columns while the other streaches.

For the simple table give above, where all the cells are the same size, the full screen width is used and there are no header or footers to worry about, the code can become quite simple. For example:

div {
float: left;
width: 33%;
}
<div>One</div>
<div>Two</div>
<div>Three</div>

This would look reasonable similar to the table above though it is only 99% wide rather than 100%.