HTML & XHTML: The Definitive Guide, 6th Edition

Tricks with Tables

By design, tables let authors create appealing, accessible tables of information. But the table tags also can be exploited to create innovative, attractive page designs that are otherwise unattainable in standard HTML and XHTML.

Multicolumn Pages

One very common and popular page-layout element missing from HTML and XHTML is multiple columns of text. Here's a tip on how to use tables to achieve that effect.^[*]

Basic multicolumn layout

The basic two-column layout using <table> has a single table row with three data cells: one each for the columns of text and an intervening empty cell to more attractively separate the two columns. We've also added a large cellspacing attribute value to create additional intervening space between the columns.

The following example HTML table is an excellent template for a simple two-column text layout:

<table border=0 cellspacing=7>
  <tr>
    <td>Copy for column 1...
    <td><br>
    <td>Copy for column 2...
 </table>

See Figure 17-1 for the results.

Figure 17-1. A simple two-column layout

The one thing the browsers won't do is automatically balance the text in the columns, resulting in adjacent columns of approximately the same length. You'll have to experiment with your document, manually shifting text from one column to another until you achieve a nicely balanced page.

Keep in mind, though, that users may resize their display windows, and the columns' ...