O'Reilly logo

HTML & XHTML: The Definitive Guide, 5th Edition by Chuck Musciano, Bill Kennedy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Multicolumn Pages

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.[103]

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.

A simple two-column layout

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required