HTML and CSS Reference
In-Depth Information
Problem Solving: Using Tables for Page Layout
Table cells can contain any HTML elements including headings, lists, inline images, and
even other tables. Because of the flexibility of tables in organizing content, before the wide-
spread adoption of CSS for page layout, tables also were used to design the layout of entire
pages. Using tables for page layout is strongly discouraged for several reasons:
•
Tabular layouts violate the purpose of HTML.
A basic philosophy of Web page design is
that HTML code should indicate the structure of a document, but not how the document
should be rendered by browsers. Tables take control of layout from style sheets, putting
page design back into the HTML file.
•
Table layouts are difficult to revise.
Imagine a complex table layout consisting of two
columns with several levels of additional tables nested within each column. Now imagine
having to revise that table structure, changing it into a three-column layout. This would
not be an easy task because the page content would be intertwined with the page layout.
Further, imagine the difficulty of having to repeat that design change for dozens of pages
across a large Web site. By contrast, a layout created with a properly designed style sheet
is much easier to maintain and revise because it is separate from the page content.
•
Tables take longer to render.
Unless the size of every element in a table is specified,
browsers need to first load the table content and then run algorithms to determine how
to size each element of the table. This can be time-consuming for large, complex tables
that involve many cells and nested elements.
•
Table layouts are code-heavy.
Creating a visually striking table layout often requires
several levels of nested table cells, rows, and columns. The ratio of HTML code to actual
page content thus becomes more heavily weighted toward the HTML code, resulting in a
document that takes longer to load and that can be difficult to interpret by people who
need to edit the underlying code.
•
Tables can be inaccessible to users with disabilities.
Aural or Braille browsers recite the
Web page content line-by-line down through the file, but tables convey information both
horizontally and vertically. The result is that information that is easily understood visu-
ally is unintelligible aurally. On the other hand, with style sheets an aural style could be
designed that would better convey such information aurally.
Because CSS is so widely supported, there is little reason to use tables for page layout.
However, Web table layouts will not disappear immediately. So as a Web page designer,
you must be conversant with both approaches—especially if you are called upon to support
older browser versions or have the task of maintaining the code of an older Web site that
involves table layouts.
