
home contact us back issues about us

January 1, 2001

The Fundamentals of Professional Web Sites

This Week’s:

Features

3 Types of Sites

5 Quick Improvements to Any Web Site

10 Quick Upgrades That Say “Professional”

Reviews

Robin Williams Has a String of Hits!

Homesite and BBEdit Are the HTML Editing Standards

Techniques

Horizontal Rules!

Vertical Rules!

I Need My Space

Technique

A site that uses verticle rules to organize information

Vertical Rules!

by Carolyn Cooper

Vertical rules can be handy to provide a visual structure to disparate information that needs to be presented on the same page, preferrably side-by-side. For example, navigation links, system requirements, or a list of materials, are things that may best be placed in a columnar format beside related information. Usually, the information can also be arranged by using horizontal rules. Horizontal rules should be used if there is any concern about the additional maintenance vertical rules require or it is critical to improve downloading speed.

This is standard table with cellspacing used to achieve a columnar format.

It can be highly effective all by itself, however, you'll also note that cellspacing effects all four sides of the table cell. Vertical rules help reinforce a consistent visual alignment.

With the arrival of HTML 4+, there are a number of ways to achieve the appearance of vertical rules, particularly with style sheets. But as usual, unless you know with absolute certainty what browser and release level your targetted audience is using, you should use a method that is not browser dependent — or at least supports the largest variety of browsers possible. The method described below should work on all browsers released since Netscape 3 except a text-only browsers.

This is what you get when you apply verticle rules with a table. Like sidebars in a magazine, it can be very useful to visually separate information.

Of course, it requires a great deal of page structure and makes maintaining the page more difficult because of extra table cells necessary. The more table cells, the more likely a tag will get left out or broken.

The vertical rules are achieved by adding extra columns to a table. There are actually only 2 columns of text in the table above, however, the table itself contains 9 cells per row! It looks like this:

<table border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td width="1" bgcolor="#000000"><img src="../images/spacer.gif" width="1" height="1" hspace="0" vspace="0" border="0" align="left"></td>
     <td width="10"> </td>
     <td align="left" valign="top">This is what you get when you apply verticle rules with a table. Like sidebars in a magazine, it can be very useful to visually separate information.</td>
     <td width="10"> </td>
     <td width="1" bgcolor="#000000"><img src="../images/spacer.gif" width="1" height="1" hspace="0" vspace="0" border="0" align="left"></td>
     <td width="10"> </td>
     <td align="left" valign="top"> Of course, it requires a great deal of page structure and makes maintaining the page more difficult.</td>
     <td width="10">  </td>
     <td width="1" bgcolor="#000000"><img src="../images/spacer.gif" width="1" height="1" hspace="0" vspace="0" border="0" align="left"></td>
   </tr>
</table>

The vertical rules are the table cells that are only 1 pixel wide (width="1") and have a background color of black (bgcolor="#000000"). I place a transparent spacer image 1 pixel wide by 1 pixel tall in the column to force the various browsers to actually display the column. (For more information on the spacer image, check out the article "I Need My Space".) Then to provide some margin space between the vertical rule and the text, I placed a new table cell 10 pixels wide (width="10") and used a non-breaking space entity ( ) to ensure the 10 pixel column appeared.

Why didn't I use the non-breaking space entity in the 1 pixel table cell? I wanted a very thin black rule and an entity is read as being a minimum of 5 pixels wide in some browsers (notably Netscape). This produces a thicker rule than I wanted, but it can be used.

Why didn't I use the spacer image in the 10 pixel table cell? It would require additional image settings and I didn't want to discuss that here.

This is an example of a table with interior rules. The rules are used only to divide the column in the middle of the page.

A smart, crisp appearance can be achieved with this technique.

But again, there is more effort in maintenance and the issue of downloading the entire table discussed below.

The advantage of the table cell method of creating a vertical rule is that the rule will automatically be as long as the entire table row in which it is used. The disadvantages are the increased complexity in building your tables — or precisely, in adjusting & modifying your tables and the download delay. Table information may not be displayed in the browser until the entire table has been downloaded and built. If you've ever had the experience of a page that seems to take a very long time to download and then "pops up" all at once, you are looking at a page built inside a table. the more complex the table, especially if there are tables containing images within the table, the greater the delay.

Use vertical rules as a design template only if you are comfortable with HTML coding and have a genuine need. A standard table, using cellspacing or cellpadding to provide your margins, usually works without the complexity. Or the information can be arranged to take advantage of the horizontal rule. But sometimes you really need or want that extra visual delineation and when you do remember, vertical rules!

Find out how to arrange an independent consultation or a workshop for your conference or organization on this or any other Internet-related topic.