I'm not a web developer, merely someone that has dabbled with both implementations through the production of my own sites and I can see where you're coming from. My latest attempt at a web presence uses CSS for 2 simple reasons despite the fact that it currently causes me more headaches than simple tables.

1. Restyling through just the CSS.
If I wanted to restyle the site I could do so by changing merely the CSS. For an example of how far you can go by simply changing the CSS take a look at css zen garden

2. Easy to read
When it comes to the actual page content it contains only a few divs and other tags as opposed to a mass of table elements that start to push things around.


Like I say, I'm no pioneer of CSS based layout but I can see the point in sticking with it so I am doing.

Quote:Original post by Verminox
Both serve the same purpose... look the same....

'Fraid not. First of all, in your float example, the text in the middle column will flow under the left and right floats if it gets too long. You need to add extra padding around the central column. Then IE 6 will add an extra 3 px margin around the floats, which can only be remedied by making the central column another float. Your next guess might be to float all three divs to the left and give them the appropriate width percentages, but then you'll have to reduce them by a few percent to stop them from being rearranged by rounding errors.

It gets even more fun when you want to make the left and right columns fixed widths (perhaps in ems, so they change with font size), and make the middle column take up the rest of the available space. Now you can't just use percentages: now you have to put in your left and right floats, then declare a non-semantic div with the necessary padding on its left and right, then add the actual content div inside it, floated to either side. Finally, if this is for a public Web site, you'll need to tweak it to make it work in all the modern browsers.

Definitely possible, but takes longer than doing a three-column layout with tables (especially when you don't overcomplicate the tables like in your example) and would be unlikely to be my first choice for some things, such as small private pages or prototypes. Until CSS provides something sensible for layout, tables are just plain easier in some cases.

/* Proposed syntax for CSS 3 layout */body {    display: "hhh" (50px)             "lcr" (*)             "fff" (intrinsic)         300px * 200px;}#header { position: h; }#left { position: l; }#content { position: c; } /* ... */

If it's any consolation, it's driven me nuts multiple times. These sites helped though...

echo echo - A fairly straightforward progression through development

little boxes - some nicely laid out examples of common layouts.

tizag - Not very clear but a fair amount of the basics

Quote:Original post by Beer Hunter
Until CSS provides something sensible for layout, tables are just plain easier in some cases.

Wow, that's quite possibly the worst-explained W3 (draft) spec I've seen, and that's saying something. The use of arbitrary strings is a bit horrific. It's fixing the wrong problem, assuming that the reluctance to leave tables means that everybody wants grids, when in fact they almost always just want to be able to line up an arbitrary number of block elements horizontally without using numerous float or margin hacks. Surely that is fixable without something like this.