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

I was also thinking Blueprint was great until I saw YAML (Yet Another Multicolumn Layout). There is an online builder tool which is fantastic. I can get a cool looking multicolumn layout within 5 mins.

Answer 2

A List Apart is a great reference for using semantic HTML, the Holy Grail article is probably one of the best examples. Also, check out CSS Zen Garden for some inspiration on the topic or read Dave Shea's excellent book "The Zen of CSS Design."

Answer 3

Why tables for layout is stupid: problems defined, solutions offered.

Answer 4

You use CSS for layout because not only is it semantically correct but because tables have multiple drawbacks.

Tables are horrible for accessibility because they break almost all screen readers, which in turn gives the visually impaired worthless information because of the way the tables are read.

They also render much slower than their CSS counterparts. Tables have to be drawn twice, once for the layout, and again for the content. This can mean that if you have a remote image or two on a server with a slow connection that your ENTIRE LAYOUT will not render.

Would you use an array to store a dictionary when you have a hashmap? No. And you shouldn't use a table when there's something out there which works better.

Answer 5

In the UK and in US there is a legal requirement for favouring CSS layouts over Tables. Both Section 508 (US) and the Disability Discrimination Act (UK) cover accessibility standards for users with limited vision.

In the UK the legislation extends so far as to actually make it illegal to commercially produce a site that impedes the ability of a partially sighted user in the same way that it is now illegal to have a shop with a step to enter it and no way for a wheelchair user to get in - admittedly there have been no prosecutions over website accessibility yet. However I would always go with CSS as it means that your site design is so much easier to maintain in the longer term.

Investing time in learning CSS (I used W3C schools and .Net Magazine http://www.netmag.co.uk) will pay off.

Answer 6

I would just use the table.

In my experience, using a table for layout will work the same in all browsers and the CSS will not (especially if you're trying to support IE6). It's just not worth the hours and hours of coding to get a layout to work in CSS when it can be done in 10 minutes using a table.

The other advantage to using tables is that your layout can very easily dynamically size itself to content. Trying to get that done with CSS is a huge nightmare.