Thursday, March 28, 2024

Toss out your Tables! CSS is the scene!



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.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured