Using Tables vs. Tableless Design

No doubt there are those who think that I'm going straight to web developer hell for having the audacity to teach people to use tables to layout web pages instead of using tableless designs.

But the plain fact of the matter is:

• Alot of people —including many high profile W3C members— seemingly don't give a rat's behind about the lofty cutting-edge web standards that are starting to frown upon the use of tables for web design (otherwise they wouldn't continue to use tables in their websites).
• Not everyone has time to learn all that it takes to create a sophisticated tableless design which includes:
  
  
  1. A thorough understanding of HTML.
  2. A thorough understanding of the W3C Box Model as well as the difference between Standards Mode and Quirks Mode, and the DOCTYPE switch.
  3. A thorough understanding of advanced CSS techniques like floating, positioning, negative margins and more.
  4. A thorough understanding of various CSS "hacks" that will keep your tableless design from falling to pieces when it's loaded in various different web browsers.

Tables More Intuitive

Also, in my humble opinion, a newbie web designer will find using tables for web design more intuitive than using the CSS techniques that typically create tableless designs.

When you structure a web page using tables, it's like building a bookcase. You establish a strong outer container and then you simply build various shelves (table rows and cells) that —for all intents and purposes— become a distinct part of that outer container. While some shelves span the entire width of the bookcase, others split into two or more compartments to create vertical columns. These columns running side by side automatically expand and contract in synchronization as you raise or lower their supporting shelf. This immutable nature of all the rows and columns of HTML tables makes designing with them easy to visualize and understand.

Floated DIVs Less Intuitive

Now although creating a tableless design using floated DIVs also starts with building a strong outer container, the analogy quickly breaks down from that point on. Instead of building shelves which become a distinct part of the outer container, you are essentially just using the outer container like a shell into which you stack a bunch of smaller boxes of varying sizes. These smaller boxes are then specially tweaked and positioned in order to make them all fit nicely together.

This wouldn't be so much of a problem if it weren't for the host of cross-browser bugs, glitches and proprietary standards which prevent those boxes from always rendering at the exact same size every time. This often renders boxes wider than they are supposed to be which then forces them to drop out of position (known as "float dropping").

Other times the boxes will mysteriously fall short of their designated vertical height leaving an area of undesired white space at the bottom. The final result can be an ongoing and often frustrating struggle to keep your nice neat web page from turning into neo-cubist train wreck. Moreover, you have to literally jump through hoops to get opposing columnar boxes to expand and contract in synchronization with one another (in fact, it can't really be done but you can fake it pretty good).

This somewhat plastic and unpredictable nature of floated div elements is not easy to visualize or work with.

However, this is not meant to impugn the use of tableless designs. Rather, if you decide to go this route and you want to match the level of sophistication of web designs using tables then be warned that you are definitely in for a chore.


*   *   *

Alright then, assuming that you want to leave tableless designs until some future date when you feel more comfortable working with CSS, let's move on to learning how to use tables to layout your web pages...