For many years, there had been great debate between the use of table-base page layouts versus the use of pure CSS-based layouts (also known as tableless layout). Now in 2008, the debate is more of historical interest, since it is clear that the web industry had gone in the direction of CSS-based tableless design. This is evidenced in the past years by many major websites doing an entire sitewide redesign to recode their table-based layouts to tableless layouts. If you pick up HTML/CSS books that are published in 2007 and 2008, you will find that it is CSS-based tableless design is what they will teach you.
Table-base layouts were what designers have been using from the beginning to position elements on the page. It involves the use of the <table>, <tr>, and <td> tags -- table, table row, and table cell element respectively. However several years ago when CSS-layout has taken hold, many were advocating the use of CSS-based layouts instead. CSS-based layout uses the concepts of float and clears and CSS rules to position elements. See Wikipedia for a history of how we first started using table-based layout and then in 2001 transitioned to CSS-based tableless layouts.
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).
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.
Andy Budd summarized the practicalities of using table-based design in this 2004 article A "An Objective Look at Table Based vs. CSS Based Design" (read the comments too). He also mentions that a lot of the benefits of CSS is overstated.
Often the debates goes as described in Sitepoint's Tech Times #142.
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.
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.
Two Types of Layouts
Sitepoint: Same design in table and css
