Published in APC, July 2000

HTML's table tags are one of its most utilised features, although relatively few designers use them simply to present data in a tabular format (as we did in last month's Insite column).

Most Web developers use tables to format page elements in more precise ways than would otherwise be possible. This can pose a significant problem for disabled people who use text-to-speech screen reader software, as it can't readily interpret the relationship of one table cell to the next. However, it has become the dominant formatting technique in Web design.

Used intelligently, tables can make a site easier to navigate and simpler to modify, but used without careful forethought, they can create a site that's slow to render and a nightmare to update. WYSIWYG Web editors often exacerbate the problem by making bizarre choices when trying to convert onscreen designs into functional table formats. To ensure that your tables are tasty rather than tragic, follow these rules.

1. Plan on paper before you start.

If you're planning to use a table with more than one cell in it, then it's worth doing a sketch of it on paper before you start writing your HTML code. It's very hard to keep track of multiple row and column spans in your head, and not all Web design tools do a good job either. You can do elaborate plans using flowchart or spreadsheet tools, but for most applications, pencil and paper are fine.

2. Build the structure, then add the content.

Don't try and incorporate every design element at once when you're using tables for layout purposes. Build a simple table and fill it with dummy text. Use different background colours in each cell if you want to be sure the table is behaving as you expect.

It's much easier to troubleshoot a page that isn't over-burdened with content, font formatting tags and other details that don't affect basic table rendering. Such pages are also useful as templates when you roll out new pages.

3. Don't embed too many tables.

It's often tempting to include multiple tables within other tables, especially if you're planning a complex page with different cell spacing and border requirements. However, heavily embedded tables are often slow to render, and keeping track of which table is where can become difficult. When you do embed tables, use indents so you can quickly identify the individual table elements.

4. Break up tables for faster rendering.

If your page features several complicated table rows, render each one as a separate table rather than as rows in a main table. This will result in faster page rendering, because the first table will display before the second, and so on, rather than forcing your browser to calculate rendering details for the entire table. Specifying table cell widths can also speed up the rendering of pages, especially if you plan to include images.

5. Learn the attributes, and use them.

The <table>, <tr> and <td> tags all have a large number of attributes that affect the way they render. Nothing beats experimentation for learning which tags are useful to you. At the same time, don't include every possible attribute in every table formatting tag (that's what FrontPage is for). In practice, it's more usual to format <td> tags than <tr> tags, but it's possible to do both.

6. Don't overformat.

Because text formatting isn't persistent between table cells, aim for the smallest number of attributes when formatting text within a table -- just demanding a specific font can double or triple the size of your page, making it slower to load.

7. Test in multiple browsers.

Tables highlight some of the most obvious differences between Netscape and Internet Explorer. What looks insanely clever in one can look ridiculously naff in the other.

8. Don't skip tags.

Tables are unforgiving if you miss an opening or closing tag -- much more so than most other HTML elements. If your table consistently fails to appear at all, then you've probably missed a closing tag somewhere. Check your code on paper thoroughly, or use an HTML checking tool.

Code library

One of the most attractive features of Web design is the ability to borrow and adapt ideas from other sites. Very few people who have developed a site could honestly claim they haven't used or viewed the source of an impressive HTML page to discover the secrets of its design. This practice is particularly prevalent when advancing from designing straightforward, exclusively HTML pages to those with more sophisticated features such as scripts.

Even if you have no desire to learn JavaScript, or some of the more esoteric extensions available to HTML tags, having an arsenal of such resources can be very handy for enhancing your Web sites. Below are three useful pieces of code which can easily be modified to suit your own needs with a little cunning. All of them are currently being used on various sites in the apcmag.com empire, so they've been tried and tested for compatibility with a wide range of browsers.

All the code can be found on this month's cover CD, ready for copying and modifying. And if all this whets your appetite for learning more about scripting, APC's JavaScript tutorial (at http://apcmag.com/javascript/) is a great place to begin.

Drop-down menus

<form>
<select name="newPage" width=100>
<option value="URL">Menu Option 1
<option value="URL">Menu Option 2
<option value="URL">Menu Option 3
</select>
<input type=button value=" Go " onClick='window.top.document.location.href=this.form.newPage.options[this.form.newPage.selectedIndex].value;'>
</form>

Drop-down menus are useful when you want to place a lot of options on a page, but don't want to consume too much space with endless listings. To use the menu code above, simply replace URL with the address of the page that users will access, and Menu Option X with whatever text you want to appear. You can add as many options as you like. Similarly, the word Go can be replaced with any text you like, while the width option can be adjusted as required. Any formatting options you want to apply should be placed before the initial <form> tag.

Automatic rediverts

<META http-equiv="Refresh" content="0; url=URL">

As long as your browser supports the Refresh function (not a problem with releases from either Microsoft or Netscape since version 4.0), you can automatically divert users from one page to another by using the above line. Simply replace URL in the line of code above with the page you want to divert people to. Current browsers will handle the diversion correctly, but if you're worried about users with earlier versions, you should also add a conventional link of 'Click here for our new site'. However, this can slow down the actual diversion, so keep such pages simple.

Pop-up windows

<script language="JavaScript">
<!--
function wOpen(url, width, height, name)
{
var fList = 'toolbar=no,scrollbars=yes,status=yes,width=' + width + ',height=' + height;
window.open(url, name, fList);
}
function opensearchquery()
{ wOpen("URL", 400, 400, "WindowName");
}
//-->
</script>

If you want to provide small pieces of related information (such as definitions, additional help or a simple mail-in form) without forcing users to leave a page, pop-up windows are a useful option.

The first section of code should be placed near the top of any page you want a pop-up link in. Replace URL with the address of the actual content you want to pop up; the two 400s with the width and height you want for the pop-up windows; and WindowTitle with the title. Then use this second piece of code in place of a normal anchor tag to provide the link:

<a href="javascript:opensearchquery();">Link text here</a>

Don't overuse pop-up windows, and resist the urge to have windows that appear automatically without users clicking anywhere; this will annoy them and give your site the feel of a cheap porn emporium.