Toss out your Tables! CSS is the scene!

http://www.htmlgoodies.com/beyond/css/article.php/3685341/Toss-out-your-Tables-CSS-is-the-scene.htm (Back to article)

I was a loyal apologist for tables. When I designed sites, a template containing a 600-pixel wide, two-column table was the blank canvas upon which I began each new work. After all these years, however, I've seen the light. Using HTML tables to position elements on a page is not only insensitive, it's messy, limiting, and downright counter-revolutionary. So, although I know it will cause tremendous turmoil in the Web development world, I'm moving to the other side of the aisle. Cascading Style Sheets are my scene now.

Simply stated, using CSS for page layout is — once you get the hang of it — much more powerful and much simpler than using tables. CSS enables you to separate presentation from content, which we'll just say is a good thing. Theory aside, there are several practical problems with tables which most of us would be glad to be rid of.

Problems with Tables

Accessibility: When you look at a well laid out page, it's obvious which part is the main content area, and which is mere sidebar material. But to an unconventional Web client such as a text-to-speech converter or a Braille reader, the intended layout may be far from obvious, especially if the client has to pick through layers of nested tables to get to the content. This affects not only disabled people, but an increasing number of people who surf the Web using non-computer devices (phones, PDAs, car systems, simultaneous translator wrist watches, etc.).
Search Engine Indexing: The same problem comes up when a search engine's spider indexes a site. Many search engines grab the first twenty or thirty words of text they encounter, and use that as the description of the site. Whatever appears in your top left table cell becomes the description of your page, whether it accurately describes the contents or not. We've all seen search engine results in which page after page has a description that reads "Home...Products...Services...About Us..." or some such gibberish. More savvy marketers see this as an opportunity, and pack the top left table cell of each page with keywords.
Because CSS allows absolute positioning of page sections, you can place each section wherever you wish in the HTML code. If you place the main content section of a page first in the code, spiders, alternative browsers and other forms of cyberlife can see the meat of each page up front (and also wade through much less code).
Endless Code: Properly laying out a page requires specifying all kinds of details such as margins, text alignment and so forth. Using tables, you have to specify all this stuff right in the tags, resulting in labyrinthine code that often takes up far more space than the page's contents. To get things to line up the way we want them to, we resort to tables within tables, little 1-pixel invisible images, and all sorts of hacks. So-called WYSIWYG editors, as well as DTP and word-processing applications that claim to allow you to "Save as HTML," use mazes of nested tables in Quixotic attempts to recreate your page layout.
CSS has more power: Absolute positioning, maddeningly difficult with tables, is a snap with CSS. Text alignment and margins are a second snap. Overlapping layers, a staple of DTP programs but impossible with tables, are no problem. CSS also lets you associate formatting with positioning. For example, you can create a sidebar style that dictates not only where the sidebar is to be, but what kind of typeface it uses.