Code Readability

A basic div consists only of <div> and </div> tag while a basic table consists of <table><tr><td></td> </tr> </table> . All of these tags become further complicated with nested tables which eventually create a behemoth JSP which is difficult to dissect. Once the time is taken to learn div layouts reading through the page markup is extraordinarily easy. Unfamiliarity with the technology is not legitimate grounds for dismissing it as div layouts with CSS only take a few weeks to learn.

• I once taught a back-end developer div layouts for some admin pages on a website. Having no CSS and div experience he picked it up in a few hours and was amazed and how much simpler the JSP became.
• Using a CSS framework and div layouts my team was able to create the basic layout and integrate into it some image generating back-end code in less than an hour.

Improved Maintenance

Most will agree that the true power of CSS is in the way it allows a site to be redesigned or revamped without having to touch every single page in the site. Using a CSS driven div layout makes it possible to update the appearance of a site on a much more frequent basis without great effort.

• Although we go through painstaking detail to separate business and action logic in our Java, PHP, and .NET code we make no efforts whatsoever to separate content from layout in our page design. A well coded HTML page contains almost nothing but content while the CSS file contains all of the layout properties. Just as we create business, action, domain, and DAO classes for separation of work and easier maintenance in back-end code, we should do the same on our front-end.
• This article reviews the merits of CSS and comes to the conclusion that the separation of content from layout is the cornerstone of CSS: http://www.michaelthorn.co.uk/web-design-tables-versus-css.php
• In order to change the layout of a table based site one must edit each and every page since the formatting properties are on the page. When changing the layout of a CSS driven div layout, it is possible to achieve site-wide dramatic changes with a few minor changes to one CSS file.
• The classic example of this is: http://www.csszengarden.com/
  Select a design under the “Select a design” section to watch the site change its appearance completely without altering the HTML markup whatsoever. This demonstrates how much change one can make by only altering a single CSS file when using a div layout.

Javascript/DHTML

All modern JavaScript/DHTML/AJAX techniques rely on div layouts, with the obvious exception of tools designed for sorting and manipulating tables. Creating advanced DHTML interactions is time consuming and frustrating when using tables.

• The DOM structure for a div based site is much simpler than a table based site meaning that DOM traversing, a crucial component of many JavaScript functions, is far easier in a CSS layout.
• A great deal of DHTML simply consists of rewriting CSS rules on the fly. If the original HTML relies on tables instead of CSS for its formatting properties, this incredibly integral functionality of DHTML is rendered moot.
• Virtually all jQuery, MooTools, and Scriptaculous plugins and examples are coded to interact with div layouts on the page. Relying on tables makes it difficult to integrate the wealth of wonderful JavaScript tools into our projects.

Browser Quirks

The battle cry of all of those who dismiss div layouts is that it is not well supported by browsers. This is a fair argument but it is also an argument whose legitimacy is diminishing over time.

• IE6, by far the most problematic browser, can be targeted with IE6 specific style sheets.
• Most browser inconsistencies actually arise from minor coding mistakes which some browsers forgive while others do not. Simply correcting these mistakes often fixes these problems.
• CSS resets eliminate all browser default styles meaning that as you start your actual development your site will render consistently.
• CSS Frameworks like BluePrint come already tested and guaranteed to render correctly in all major browsers, usually back to IE6.
• Tables themselves do not render consistently across all browsers and are actually often much more difficult to style since many of the table and table cell properties such as “align” and “bgcolor” are deprecated as of HTML 4.01 (source).

Modern Design

Many modern design techniques are far easier implemented with CSS div layouts than they are with a table structure. Tiled backgrounds, drop shadows, and rounded corners are just a few of the examples of prevalent design trends made much easier with CSS.

• This website, as well as many others like it, feature fantastic designs that can only be realized through CSS: http://cssremix.com/

Thinking Ahead

With CSS3 on the horizon it is clear that all future advances in HTML markup are going to be done in a table-less CSS driven manner. Quite simply, there is a ton of new functionality being developed for CSS based layouts while nothing new is happening for tables. It is crucial to begin understanding CSS now as to not be completely left in the dust in the upcoming years.

• This article demonstrates some of the amazing CSS techniques on the near horizon: http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/