understanding tables

The HTML tags that create tables have become the workhorse of many web designs. They were designed to display rows and columns of data, but have been used instead to creatively subdivide the page, creating grids for interesting layouts.

Over the years, tables have been combined and contorted to make way for any number of creative web designs. Tables can be used to create columns of text or lovely patchworks of color. And graphics can be chopped up and divided among table cells to achieve the illusion of a continuous image.

The problem with tables is that the HTML code gets very complex. And this complexity slows down your site: Embedded tables and mistakes within complex ones are a major culprit behind slow web pages.

There's another big problem with tables: Data in a table is structured simply to look good in a web browser there's no deeper meaning in its use of rows and columns. This renders the page unreadable to other types of applications, such as handheld computers (which have a smaller screen) and screen readers for the blind (which rely on a logical structure to translate pages into verbal explanations).

For this reason, many designers now use stylesheets to lay out their pages. Stylesheets (combined with <div> tags) allow you to format the page visually without confusing the page structure. (See understanding stylesheets, p. 162, and building your site to last, p. 184.)

learning to use tables

The trick to using tables is translating the visual design you want into a series of table "cells" (of varying width) within rows (of the same width). All the content that appears in the table must be contained within one of the cells.

You'll find good tutorials on tables on the site Webmonkey (see the listing on this page) or in most HTML reference books.

what you need to know about tables

what they are

Tables are an HTML feature that allow you to divide the page into columns and rows.

how they're used

Although they were designed to contain columns and rows of data, tables are actually used as the workhorse of web page layout. Designers use them to creatively subdivide the page into sections that contain different background colors, images, and/or text.

why they're loved

Tables made advanced layout on the web possible. They allowed designers to create the illusion of columns, to stagger images and text around the page, and to create complex interfaces.

why they're hated

Many feel the time of tables has passed, and that designers should be moving toward stylesheets as a presentation tool. Also:

• Tables are overused and misused. Many sites rely unnecessarily on an intricate grid of tables embedded within tables.

• Complex, poorly specified tables slow pages down.

• Pages built in tables are very specific to the web browser. They can't be displayed by other systems, like handheld computers or other future devices.

• Pages built in tables can't be easily interpreted by screen readers for the blind.

• Sites built with tables don't comply with web standards. See why you should follow web standards, p. 186.

Learning to use tables

Webmonkey table tutorials

http://www.webmonkey.com/authoring/tables/