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.
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’ ...