Table Talk

The use of tables is a perfect example. Many Web pages often try to emulate the layout of magazines, complete with multiple columns, callouts (information you want to stand out), and illustrations. Using tables can help you achieve this look, without having to resort to painstaking hand coding. Most of today's browsers now handle HTML tables, and the things that you can do with tables-- even using just the standard table tags--are pretty amazing.

Setting the Table(s)

Tables are constructed of rows, columns, and cells, just like spreadsheet programs. A row may span several columns, and a cell can span more than one row or column. A basic two-column, magazine-style layout can be achieved by using a single table row with three data cells: one for each column of text, plus an empty cell between them to create space between the columns.

To create the space between the table cells and the information or images in the cells, you'll want to use a technique known as cellpadding. Cellpadding controls the amount of space between the edge of a cell and its contents.

Add a cellpadding value of five or more to the table tag to create even space between all the columns, including the empty one. The browser will not make the text in the columns equal, so a bit of text tweaking is necessary to create the two-column effect. Don't waste too much time making the text perfectly balanced; remember that users can resize their browsers, which tends to screw up the design that you have so painstakingly created.

Figure 1, below, illustrates how you can do all this. A normal heading tag is centered above the table, and the table is centered on the page. The heading could have also been included in the table, although there is no added benefit to doing so.

<TABLE CELLPADDING=6 WIDTH=600>
<TR>
<TD>data... . .
<TD>
<TD>data... . .
<TR>
</TABLE>

The use of single-pixel images can improve this two-column layout further. A single-pixel image is simply a one pixel wide, one pixel high "dot" that you create using a graphics program. By using the height and width attributes of the image tag, the single-pixel image can be stretched, and will appear as a longer or wider image.

The single-pixel image can be used as a vertical rule between columns in an article by specifying the HEIGHT attribute of the <IMG> tag to be the same as the pixel height of the particular column.

There is no simple way to find the exact pixel height of a column, but using 85 pixels per inch as a start, you should be able to get a pretty good match. The image tag for a two-inch-high column might look like this:

<IMG SRC="single-pixel.gif" HEIGHT=170>

Pages with more than three columns will force users with smaller displays to scroll to the right in order to see the whole table or page. In order to keep your page easy to view, you'll probably want to use a maximum of three columns.

Using a cell that spans several columns, you can combine text, graphics, and vertical rules (using single-pixel images) to create a magazine-like display. Images can span more than one column by adding the <COLSPAN> attribute to the cell containing the graphic. Similarly, columns can span more than one row by using the <ROWSPAN> attribute in that particular column. If you wanted to have a graphic span three columns, your cell tag could be coded like this:

<TD COLSPAN=3>

and your multi-row spanning column would be coded like this:

<TD ROWSPAN=2>

In Figure 2, we use both of these tricks--as well as a single-pixel image as a vertical rule--to create a three-column layout, complete with images and text. We're also using a horizontal rule, an increased font size surrounding some text, and another horizontal rule to create a callout. Although the Font tag is a proprietary Netscape/Internet Explorer extension, it will just be ignored by non-capable browsers, so you can only gain by using it.

<TABLE BORDER=0 CELLSPACING=7 WIDTH=85%>
<TR>
<TH COLSPAN=5><H2>Tables are for
<I>More Than Eating!</I></H2>
<TR VALIGN=TOP>
<TD ROWSPAN=2>info...
<HR size=2><FONT SIZE=4>This feature
 is can be used to simulate "callouts"
 in this magazine-style Web page.</FONT>
<HR size=2>  continuing info...
<TD ROWSPAN=2 WIDTH=24><IMG SRC="vrule.gif"
HEIGHT=380>
<TD>info...
<TD WIDTH=24><IMG SRC="pixel.gif"
HEIGHT=100>
<TD>and the final info...
<TR>
<TD COLSPAN=3 VALIGN=TOP><CENTER>
<IMG SRC="smwd.gif">
<BR>
<I>Magazine</I>
</TABLE>

One of the most popular uses for tables seems to be pages with one and a half columns, so to speak. The main portion of the page is for text, and the remainder to the left or right is used for comments, callouts, and images--and no frames! This is done by using the Width attribute in the table tag, along with a simple two-column layout. The Width attribute can be specified in either a width percentage or in pixels. A table width greater than 800 pixels will force readers to scroll to see the whole table.

Table Talk
Table Talk - Conclusion