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 or XHTML.
One very common and popular page-layout element missing from either HTML or 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
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 ...