Vertical Rules!

Vertical Rules!

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″>
<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″>&nbsp;</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″>&nbsp;</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″>&nbsp;</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″> &nbsp;</td>
<td width=”1″ bgcolor=”#000000″><img src=”../images/spacer.gif” width=”1″ height=”1″ hspace=”0″ vspace=”0″ border=”0″ align=”left”></td>

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 (&nbsp;) 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 entiretable 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!

Horizontal Rules

Horizontal Rules

Horizontal rules are the horizontal lines or bars that are used to separate items on a web page. Used correctly, they can help organize disparate information on a page (for example, the horizontal rule at the bottom of this page that separates the article from the copyright information). Used incorrectly, particularly the graphical rule (or bar), they are the second quickest visual signal of an amateurish web site. (Inappropriate page backgrounds are the quickest visual cue but we’ll discuss that next week.)

Use the horizontal rule tag, <hr>, instead of graphical rules or bars. Rainbow, 3D, striped, translucent and other graphical horizontal rules or bars are not only garish but dated, and eat up valuable download time for no good purpose. Use plain or black horizontal rules. A “plain” horizontal rule will appear 3-dimensional. To create a black rule, add “noshade” to your <hr> tag. If you are developing exclusively for the Internet Explorer 4+ browser, you may choose specify a color for the horizontal rule tag, however, I wouldn’t recommend it unless it’s grey. Color should be reserved to convey importance.

This doesn’t mean that your horizontal rules have to be dull. There are many subtle things that can be done with just the standard HTML horizontal rule tag, <hr>.

For Example:

<hr size=”10″ width=”10″ align=”center”>

Above is <hr width=”100″ align=”center”>
Below is <hr width=”100″ noshade align=”center”>

The “size” attribute specifies how thick the rule will appear. For example:

<hr size=”1″ noshade >

<hr size=”25″ noshade>

The “width” attribute specifies how long the rule will be. Width can be specified as a specific number of pixels (i.e., width=”25″) or as a percentage (i.e., width=”25%”). Using the percentage will give varying results depending upon where it’s used and the size of the browser window. The percentage used inside a table represents the percentage in relation to the width of the table cell. The percentage used outside of a table is in relation to the width of the browser window. If you’re in doubt, use a specific pixel number. For example:

<hr width=”100″ noshade >

<hr width=”100%”>

Notice that the default alignment for the horizontal rule tag is centered. If you want to change the alignment, you use the “align” attribute. For example:

<hr size=”1″ width=”100″ align=”left”>

<hr size=”1″ width=”100″ align=”right”>

With the HTML 4 standards, many of the horizontal rule attributes are deprecated in favor of using style sheet box elements to achieve the same effects. Unfortunately, there are still a large number of browsers in use that don’t support the new standards and style sheets.

I Need my Space

I Need my Space

Sometimes you just need a little space. David Seigel popularized the spacer image in his book, “Creating Killer Web Sites” but it’s flagrant abuse led to his apologizing later. The spacer image, used correctly, can be extremely useful. Much of the abusive use of the spacer image has died with the incorporation of style sheets which give designers more control over text spacing.

The spacer image is a 1 pixel by 1 pixel transparent image that can be used to control spacing with a great deal of accuracy across browsers. By specify the hspace (horizontal space) and vspace (vertical space) attributes, you can:

create space around text or graphics

or control table cell width.

The actual spacer image tag used used to create the purple column looks like this:
<img src=”spacer.gif” alt=”spacer image for the article” width=”1″ height=”1″ hspace=”10″ vspace=”10″ border=”0″ align=”top”>

By changing the “hspace” attribute I control how wide each table cell will be. The “hspace” value is applied equally to the right and left of the image, so the amount of total space is double the value (in this case the table cell is 21 pixels — 10 hspace + 10 hspace + 1 pixel image width).

The vspace attribute is this example is set to “10” to control the height of the table cell. And again that adds 10 pixels above and 10 pixels below for a total height of 21 pixels.

You can create your own spacer image in any web graphics program. Simply create an image 1 pixel wide by 1 pixel tall, fill the inside with a solid color and then save it as a gif 89A image and make the fill color transparent.

Or you can simply save the image inside the square border below to your computer by clicking on the image and choosing “Save Image as” or “Save this Image as”.

You will have to fiddle with the “hspace” and “vspace” attributes to get the spacing effect you need. I find the spacer image particularly useful when I want to increase the space between page elements. The spacer image allows much greater control and accuracy than say adding break tags (<br>). You can also create some interesting vertical and horizontal bar effects by modifying the actual width and height, however, I recommend using horizontal rules or the vertical rules techniques found inside this issue.

But the next time you need a little space, you’ll have it at your command.