Toss out your Tables! CSS is the scene!
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
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
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
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
- 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.