Cascading
Style Sheets (CSS)
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.
There
is, of course, one big argument against replacing tables with CSS
divisions. How you phrase it depends on your ideology. Older browsers
support CSS poorly or not at all, so forgoing CSS in favor of the more
backward-compatible tables is either:
-
A.
Accommodating the needs of those less fortunate, who don't have
access to the latest browsers, or
-
B.
Pandering to an ever-smaller number of inexpert Web users who can't
get it together to download and install a free piece of software.
These
two viewpoints represent opposite sides in a debate that has recently
become very lively — the question of adhering to current standards
versus designing for backward compatibility. The CSS-versus-tables issue
is not directly parallel, since there's nothing technically incorrect
about using tables for positioning, but it is one of the fronts on which
the standards-versus-compatibility war is being fought.
CSS
is partially supported by Internet Explorer 3.01 and later, Netscape
Navigator 4.6 and later, and Opera 3.6 and later. Figuring out exactly
what features are supported in which browser versions is an arcane
subject indeed. Eric
Meyer's Style Sheet Reference Guide and the House
of Style both include browser compatibility charts. For any
given browser version (and there are often differences between Windows
and Mac versions), there are features that work, features that don't,
and others that work some of the time or in some weird way. Something
close to full CSS-1 support is found only in the most current versions.
According to WebReview, IE 5.5 supports 92.5% of the CSS1 spec, Netscape
6 supports 98.5%, and Opera 5 supports 98.9%.
The
position of what I call the "standards camp" is this: Most
current browser versions support HTML 4.0 and CSS-1 pretty darn well
(with certain notable exceptions), so let's start using these standards
to their fullest, instead of being so obsessed with making our pages
backward-compatible.
One
of the torch bearers for this worldview is the Web
Standards Project (WaSP), which describes itself as "a
grassroots coalition fighting for standards on the Web." WaSP
encourages developers to take advantage of current W3C standards
"even if the resulting sites fail (or look less than optimal) in
old, non- standards-compliant Web browsers."
These
true believers point out that the more developers dumb down their code
for the benefit of old browsers, the less incentive users have to
upgrade. Instead of encouraging people to keep their old browsers, we
should be encouraging them to grab a nice shiny new free copy of Internet
Explorer 5.5, Internet
Explorer for the Mac, Netscape
6, or Opera
5, and get those old browsers off the highway. WaSP's Browser
Upgrade Initiative aims to spread the word. The case is
stated very well in an article from A List Apart called To
Hell with Bad Browsers.
Predictably,
some folks strongly disagree with this sort of thing. One member of the
"compatibility party" points out that the Web is supposed to
be a free-form, cross-platform, do-your- own-thing medium. What gives
anyone the right to tell people what platform or browser version to use?
However, newer standards such as HTML 4.0, CSS and XML don't force
anyone to use a particular platform — rather the opposite. The idea is
simply to enforce standards so that everyone can talk to everyone else.
A
more thought-provoking rebuttal came from a professional pundit, who
pointed out that those nice new browsers come with hefty system
requirements that many people in the world simply can't afford to meet.
As the Web truly is a worldwide medium, this is something worth keeping
in mind. Billions of potential Web users live in countries where
cassette tapes are still the state of the art in stereo gear, and lots
of people spend all day working with 286s running DOS.
The
most compelling need to choose backward compatibility over current
standards is felt by those selling products online, especially those
brave souls who aren't targeting computer users per se. The
mantra of the e-commerce crowd is Turn No Potential Customer Away.
If you're a niche vendor running a mail-order business, then the danger
of losing business among less sophisticated Web users may loom larger
than the benefits of a standards-compliant Web site.
