Skip to main contentSkip to section navigation
Web Style Guide

Other uses for tables

Spacing and alignment

Tables can be used to combine different text alignments on the page. In this example the text in the left column is right justified, and the text in the right is left justified.

Illustration: Tables used for alignment
Example: Tables used for alignment (opens in new window)

Tables can also be used to format such elements as bulleted lists or indents. For example, even with the aid of style sheets, the BLOCKQUOTE or list elements of HTML may produce clumsy-looking results, with overly indented text and excessive white space. You can use invisible tables to control more precisely how these typographic devices render on the page.

Illustration: List layout with HTML and with table

Colored backgrounds

You can use tables to color areas of your pages by placing the BGCOLOR attribute in your table tag and assigning it a color. You can color an entire table, a table row, or an individual table cell. Table coloring is an easy, low-bandwidth approach to adding visual identity and structure to a page without relying on graphics.

Working with images

Tables give the designer much greater flexibility in positioning images on a page than simple inline image placement. You can use tables to create complex layouts that combine text and images or multimedia materials. The example below is shown with borders both on and off to depict the underlying table used to establish the layout:

Screen shot: Complex layout on Nietzsche Chronicle page

Something fancy you can do with tables is to take a composite image, split it in pieces, and then recombine it in the cells of a table. This technique is useful for creating wraparound effects, image captions, or rollovers. The following example is depicted with borders on and off to show how the table is formatted:

Illustration: Mortised image using tables

Watch out for hard returns in your HTML code when using tables to join an image. A hard return before a closing table data tag (</TD>) will add space between the table cells. You will also need to set the CELLPADDING, CELLSPACING, and BORDER parameters of the TABLE tag to zero in order for the image to join correctly. Finally, be sure to include an invisible image to keep the cells in your tables from collapsing (see the section on fixed-width tables).