DIV's vs. Tables or CSS vs. Being Stupid

Question

I know that tables are for tabular data, but it\'s so tempting to use them for layout. I can handle DIV\'s to get a three column layout, but when you got 4 nested DIV\'s, it

Answer 1

There's the Yahoo Grid CSS which can do all sorts of things.

But remember: CSS IS NOT A RELIGION. If you save hours by using tables instead of css, do so.

One of the corner cases I could never make my mind up about is forms. I'd love to do it in css, but it's just so much more complicated than tables.

You could even argue that forms are tables, in that they have headers (labels) and data (input fields).

Answer 2

After a while you don't even think about it. Using divs with CSS seems like the easier option imo. Plus, you have more freedom when using frameworks such as jQuery. I couldn't imagine doing some of the cool jQuery stuff without using css or divs. If you use tables for style and layout I feel like you miss out on a lot of new technologies and stay stuck in the 90's.

Answer 3

This may be unhelpful but I somehow don't understand all these problems related to CSS. If a newspaper designer would try to embed a movie in the ad page, everybody would agree that he's a bit crazy. But still those same people pine after three-column layouts in HTML. HTML is just not apt to handle this kind of layout well at the moment. Furthermore, multi-column layouts are generally not really well-suited for reading on computer monitors. Aren't there enough viable alternatives?

And by the way, even tables don't offer a good way of implementing a fluent column layout so this is no reason at all to resort to such hacks. Assuming a halfway modern browser (i.e. > MSIE 6), tables don't offer any advantages over clean HTML + CSS that I know of.

Answer 4

In my opinion, the bias should be in favour of CSS over IE6 - i.e. unless there's an insanely good reason (e.g. your site is only targetted at people using IE6, which would be weird), it's better to 'alienate' people using IE6 rather than people with poor vision and/or automated user agents. Usage of IE6 is decreasing; the latter group is increasing in number. Even if your site doesn't look perfect in IE6, it will probably be easy for those users to read it than a table-based layout will for those who can't see it.

This is a very general question, so it's difficult to answer with specifics. The two books that are excellent resources are:

• Bulletproof Web Design, Dan Cederholm
• CSS Mastery, Andy Budd

If you only have to spend an hour designing your overall site layout, that's not bad going.

Answer 5

CSS may not be a religion, but it is how browsers interpret HTML for layout. Like it or not, all modern browsers use (some version) of the W3C box model. To continue to rely on tables is continue to rely on a methodology that is just plain wrong in the eyes of the people who design web rendering technology.

I know CSS can seem awfully complicated at times, but I believe it is a necessity in this day and age (trust me, your clients are going to want it).

If you don't feel comfortable taking the time really learn CSS (so it takes you seconds or minutes to position elements...not an hour), then you need to pass the layout work on to someone who knows really knows the front-end.

Yes, there are a lot of problems with the current browser implementations of CSS, but nothing so drastic that you should ever feel the need to return to table based layout. Just sit down and take the time to learn it, like you would any other language or framework.

The best online reference resource I've found is this one: http://reference.sitepoint.com/css

But it might not hurt to look at a book like Designing With Web Standards which goes a long way in helping you to understand why this stuff is important.

Answer 6

You might be able to find some inspiration here: http://blog.html.it/layoutgala/