Chapter 20. Creating Multicolumn Layouts with Tables

The best way to get multiple columns of text in your table-based design is to drop a nested table into the main content cell, as in Figure 20.1. The nested table can have as many columns as you need, although you probably don't want to use more than two or maybe three.

Figure 20.1. Use a nested table in the main content cell of your layout to create multiple columns for text.

Normally, when you nest a layout table inside another layout table, you set the border, cellpadding, and cellspacing attributes of the nested table to 0. Doing this makes sure the nested table fits snugly inside its container cell. However, when the layout table holds multiple columns of text, you don't want this effect. Try reading two columns of text sitting next to each other without sufficient whitespace separating them, as in Figure 20.2, and you'll see exactly why.

Figure 20.2. You have to plan for whitespace between the columns, or you get something like this.

TIP

You don't want to use more than two or three columns in a multicolumn layout, and three columns is pushing it. Think of the visitors to your site who don't have giant monitors with ultrahigh-resolution displays. When you try to squeeze too many columns into the content cell, you get columns that are too narrow to read or the dreaded horizontal scrollbars.

The cellspacing attribute of the table tag can help you here. Cellspacing controls the amount of space between adjacent cells. Just set the cellspacing attribute to something other than 0, and you get instant whitespace. The exact value depends on the look you're going for, but 12 to 16 pixels are generally sufficient. The layout in Figure 20.3 uses a cellpadding of 12.

Figure 20.3. Setting the cellspacing of the table to a value like 12 gives you automatic whitespace.

TIP

Cellspacing also affects the space around the table cells, not just between them. Consequently, your columns of text won't fit snugly against the sides of the container cell. If this throws off the look you're trying to achieve, you can keep the cellspacing of the nested table at 0 and add a separate column for whitespace between the columns of text. Set the width of this column to the amount of whitespace you want, like this:

 <table width="412" border="0" cellpadding="0" cellspacing="0">  <tr>   <td width="200" valign="top">First column of text</td>   <td width="12"><! White space ></td>   <td width="200" valign="top">Second column of text</td>  </tr> </table> 

Listing 20.1. View Source for Figure 20.3.

[View full width]

 <table width="400" border="0" cellpadding="0" cellspacing="12">   <tr>     <td width="50%" valign="top">       <p>Reading the text is easier with just a little extra white space between the  columns.</p>     </td>     <td width="50%" valign="top">       <p>This example uses a cellspacing of 12 to create just enough of a visual break.</p>     </td>   </tr> </table> 

You want to be sure to do a couple of other things, too:

• Give equal widths for each column. This forces the browser to make them the same size. If you don't do this, the browser adjusts the widths of the columns to fit the amount of text you put in them.

• Set the valign attribute of each table cell to top. This makes sure your columns of text line up along the top. Otherwise, the browser centers them vertically.

• Balance the columns of text so they're roughly the same height. The browser won't do this for you, so you have to do it by hand. Make sure you have about the same amount of text in each column, or you'll throw off your layout.

TOOL KIT

Multicolumn Layout with Tables

This Toolkit shows you how to make a nested table for multiple columns of text. Put this table inside the main content area of your layout.

[View full width]
 <table width="contentcellwidth" border="0" cellpadding="0"  cellspacing="whitespacewidth"> <!-- In the table tag above, insert the width of your layout  table's content cell. Also give the amount of white space you  need between the columns, generally between 12 and 16 pixels. -->   <tr> <!-- This block of code creates a single column. Copy and paste  this section for as many columns as you need. Be sure to specify  the width of each column. In a two-column layout, make the width  50%. In a three-column layout, make the width 33%. In a  four-column layout, make the width 25%, and so on. -->     <td width="columnwidth" valign="top">       Content goes here     </td> <!-- End of column code. -->   </tr> </table>