I have a momentous announcement for you, dear readers. I'm
changing my allegiance. My conscience will no longer allow me to
use tables for page layout. As you all know, for years I've been
in the pro-table camp, ignoring the old establishment's
objections that tables were never intended to be used
for positioning, and that they could create problems for some
disabled users. Our rallying cry was "They're the only tools
available!"
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.
