WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Table Talk

by Scott Clark

News flash, developers: You don't need Java or multimedia or any other fancy tricks to make a good page look great. It seems that with all these new toys at our disposal, we've forgotten that just by learning and utilizing the lesser-used capabilities of HTML, we can yield some impressive results.

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:


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


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.

Fine-Tuning Forms

Forms are usually a very disorganized mass of text and input boxes. The <PRE> tag was about the only way to save them from total disaster, until table-savvy Web designers came along. Figure 3 shows how you can make your form more presentable by using a simple two-column format.

Using a table header that is right-aligned, create the labels for the input fields, and use a standard table data tag for the input sections of the form. The Submit and Clear buttons are in the bottom row, which has two table data cells. The first table data cell is empty, and the second contains the two centered buttons. More advanced forms also can be used with tables, including tables within tables that contain checkboxes and groups, each aligned in a neat, centered row.

Browsers: The Previous Generation

Of course, you will inevitably encounter users who try to view your multi-column creation using an archaic Web browser that doesn't support tables. Before all you Lynx users pick up your quill pens to send me hate mail, you should know that even Lynx now has a version out that supports basic table tags...so do us all a favor and get a copy!

That said, we still have to deal with those users who may not have had the opportunity to upgrade their browsers. Not a problem: Simply put <BR> or <P> tags at the end of the information in each cell, and use headings and other standard HTML tags in tables where applicable. Table-aware browsers will ignore the breaks and paragraphs, while table-challenged browsers will still render them in a readable format, complete with standard HTML tags. They still won't look as good as you had intended, but at least the user won't be looking at an unreadable mess where your table was supposed to be.

As you can probably see from just these few simple tips and techniques, Web pages don't have to be limited to flat, one-column layouts, nor do you have to use the latest plug-ins to enjoy them. The Web was designed to be a platform-independent viewing mechanism. Finally, keep in mind that content is always first and presentation second in the order of importance; no graphic makes a poor product worthwhile.

HTML5 Development Center

Recent Articles