mums

Tables Used for Layout

The photograph of the flowers, the heading, and this paragraph occupy a cell spanning two columns of the first row to form a header.

Links

  home  

  tips  

  gallery index  

  frames  

Main content section

Tables are normally used to present data arranged in rows and columns. They are familiar to users of spread sheets and databases.

However, this layout, sometimes called the classic C layout, uses a three-row table to define sections. A large cell in the middle row contains this section with the links column in the cell to the left. The top and bottom rows define single column header and footer sections.

This alternative to using CSS and frames has the advantage that is it compatible with legacy browsers and, if the tables are kept to a minimum, will also load quickly. That is the reason I made paragraphs to separate the links at the left rather than nesting a second table in the cell. Unlike with frames, this table will print easily and users can set bookmarks accurately.

A disadvantage of using tables for layouts is that links to named anchors (to jump down a page) do not work if the target is inside a table.

One of my favorite uses of tables for layouts is to present a column of thumbnail images on the left with the corresponding text to the right.

The floral page also uses a table for its layout.

Here a footer is formed by joining the two cells in the bottom row.