Table Design Vs Tableless Design

Advocates of CSS tableless layout

The advocates of CSS layouts say that a CSS layout is easier to maintain, more accessible and SEO-friendly, proper semantics, lighter in code and hence better performance. Here are more details of the benefits of tableless CSS layouts. Cameron Olthuis summarizes the benefits. O'Reilly does a good job explaining the benefits and the drawbacks of CSS layout and even does a code comparison (at the bottom of the last link).

Advocates of Table-based Layouts

Back then, the advocates of table-based layouts would say that CSS layouts have a steep learning curve and are susceptible to many browser bugs such as the 3 pixel jog, float drops, etc. Complex CSS hacks and workaround have to be employed in order to get the the layout to function solidly and have equalized columns in the variety of browsers. Whereas, table layouts are easy to understand and and fast to implement and works right-off-the bat without extra hacks.

Our Suggestion

Our suggestion is to try your best to learn and use CSS-based layouts whenever possible. Reserve the use of table for tabular data and for layouts of HTML emails (both of which are valid reasons for using tables). We do conceded that sometimes tableless design can be more difficult and take more time. So if you are a frustrated beginner (like many others) who is just learning the trade, we can understand if you make exception to the rule and fall-back on the use of tables. And that is okay. We have been there ourselves. You can always attempt the CSS-layout when you have gain more experience.

But if you do use table layouts, use the CSS "table-layout:fixed" property for your table. As mentioned in IE blog this will cause IE browser to do progressive rendering on table contents so that IE browser does not have to parse all the way to the ending table tag before drawing things on the screen.

What's in the Future

Kevin Yank (editor of Sitepoint) write in his article "Table-Based Layout Is the Next Big Thing" that "The lengths to which designers must go to produce, say, a simple three-column layout using CSS techniques are so extreme that many web designers simply give up on CSS and resort to HTML tables for their layout."

However, the "next-big table-base layout thing" that Kevin is talking about is not the "table" tag that designers have started off with. Kevin is referring to the "CSS tables". You still use "div" tags instead of "table" tags as in CSS-based layouts. However, you don't have to use floats and clear. Instead, you use CSS properties such as ...

display: table;

display: table-cell;

Well, why are people using this method if it is an easier-to-understand form of CSS-based layouts exists. The problem is that the predominate browser as of this writing, IE7, does not support display: table.

However, the upcoming IE8 (having passed the ACID2 test) does support this property -- making that property supported by all major browser. Kevin claims that by then (and after IE7 becomes obsolete), designers will start using this new method for layout.

Others claim that future-coming CSS3 Advanced Layout Module will solve many of the CSS-based layout issues and will present yet another way to do layouts.

References

Two Types of Layouts

Sitepoint: Same design in table and css