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 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 15.2 for the results.

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' contents will shift accordingly. So don't spend a lot of time getting the last sentences of each column to line up exactly; they're bound to be skewed in other browser window widths.

Of course, you can easily convert the example layout to three or more columns by dividing the text among more cells in the table. But keep in mind that pages with more than three columns may prove difficult to read on small displays where the actual column width might be quite small.

Straddle heads

The basic multicolumn format is just the start. By adding cells that span across the columns, you create headlines. Similarly, you can make figures span across more than one column: simply add the colspan attribute to the cell containing the headline or figure. Figure 15.3 shows an attractive three-column layout with straddle heads and a spanning figure, created from the following HTML source with table tags:

<table border=0 cellspacing=7>
  <tr>
    <th colspan=5><h2>The History of the Kumquat</h2>
  <tr valign=top>
    <td rowspan=2>Copy for column 1...
    <td rowspan=2 width=24><br>
    <td >Copy for column 2...
    <td width=24><br>
    <td >Copy for column 3...
  <tr>
    <td colspan=3 align=center><img src="pics/fruit.gif">
    <p>
    <i>The Noble Fruit</i>
</table>

To achieve this nice layout, we used the colspan attribute on the cell in the first row to span all five table columns (three with copy and the two intercolumn spaces). We use the rowspan attribute on the first column and its adjacent column spacer to extend the columns down beside the figure. The figure's cell has a colspan attribute so that the contents span the other two columns and intervening spaces.

When tables aren't implemented

One of the dangers of being overly dependent on tables is that your documents are usually unreadable when viewed with browsers that don't support tables. In the case of side heads, though, your document will come out just fine on a "table-challenged" browser.

Most browsers follow one of the Internet's basic tenets: be liberal in what you accept and strict in what you create. This usually means the browser will ignore tags that don't make sense, including all of the markup that creates a table.

In the case of our side-head layout, the browsers that can't do tables ignore the table tags and only see this part of the document:

<h3>Section 1</h3>
  Copy for section 1 goes on and on a bit 
  so that it will take up more than one line in the
  table cell window...   
<h3>Section 2</h3>
  Copy for section 2 goes on and on a bit 
  so that it will take up more than one line in the
  table cell window...

Of course, this is a perfectly valid sequence of HTML that generates a conventional document with sections divided by <h3> headers. Your document will look fine, regardless of the browser, table-capable or not.

Basic form layout

Your forms will almost always look better and be easier for your readers to follow if you use a table to structure and align the form's elements. For example, you might use a vertical alignment to your forms, with field labels to the left and their respective form elements aligned to an adjacent vertical margin on the right. Don't try that with just standard HTML.

Rather, prepare a form that contains a two-column table. The following HTML source does just that, as shown in Figure 15.5:

<form method=post action="http:/cgi-bin/process">
  <table>
    <tr>
      <th align=right>Name: 
      <td><input type=text size=32>
    <tr>
      <th align=right>Address: 
      <td><input type=text size=32>
    <tr>
      <th align=right>Phone: 
      <td><input type=text size=12>
    <tr>
      <td colspan=2 align=center>
      <input type=submit value="Register">
  </table>
</form>

Of course, more complex form layouts can be managed with tables. We recommend you first sketch the form layout on paper and then plan how various combinations of table elements, including row- and column-straddled table cells might be used to effect the layout.

Building forms with nested tables

As we mentioned earlier, you may place a table inside the cell of another table. While this alone can lead to some elaborate table designs, nested tables also are useful for managing a subset of form elements within the larger table containing the entire form. The best application for using a nested table in a form is for laying out checkboxes and radio buttons.

For example, insert the following row containing a table into the form table in the previous example. It creates a checkbox with four choices:

<tr>
  <th align=right valign=top>Preferences: 
  <td>
  <table>
    <tr>
    <td><input type=checkbox name=pref>Lemons
    <td><input type=checkbox name=pref>Limes
    <tr>
    <td><input type=checkbox name=pref>Oranges
    <td><input type=checkbox name=pref>Kumquats
  </table>

Figure 15.6 shows you how this nested table attractively formats the checkboxes, which browsers would otherwise render on a single line and not well aligned.