Why Not Just Use <hr>

There are limitations to the convenient <hr> tag. The biggest is that there is no vertical line tag. Secondly, the COLOR attribute of the <hr> tag is not supported by Netscape. A colored <table> cell background is supported by Netscape.

These tabular lines are nothing more than a very narrow table that has no visible content, just a background color. A <br> tag or "&nbsp;" special character are generally used to provide the invisible content.

There are also some other effects that can be produced by a tabular line that cannot be replicated by the <hr> tag like breaking the line up into multi-colored cells.

There is one important limitation to making lines with tables. Horizontal lines made with tables can be no narrower than a bulky 20 pixels or so as displayed above. Vertical lines can be much narrower, but have a limit at four or five pixels.

Making Horizontal Lines With Tables

This is nothing more than making a single-celled table and putting a background color in the cell's <td> tag:

<table width="70%" height=20 align="center" cellspacing=0 cellpadding=0 border=0>
<tr><td width="100%" bgcolor="red">
<br>
</td></tr></table>

The above code made the red bar in the first section of this page. Not much to it really. Remember that the table can't be made narrower than 20 pixels or thereabouts. For a really narrow line you'll have to resort to making a graphic line and using the image as a horizontal bar. We'll be discussing how to do this with vertical lines at the end of this lesson.

You can add more cells and give them different BGCOLORs to make the second line presented above.

Making Vertical Lines:
Method #1

Now lets make some vertical lines. Here's an example of the effect. Notice the black lines framing the center area.

Below is the code for the table with the code for the lines in red. You'll see that they are just regular cells/columns except they are sized to a very narrow width and have invisible content ( a <br> tag):

<table width="100%" height=500 cellspacing=0 cellpadding=5 border=0>
<tr>
<td width="20%" align="center" valign="top" bgcolor="#ff9900">Column #1</td>

<td width=1 bgcolor="#000000"><br></td>

<td width="60%" align="left" valign="top" bgcolor="#ffffff">
<h1 align="center">Main<br>Content</h1>
</td>

<td width=1 bgcolor="#000000"><br></td>

<td width="20%" align="center" valign="top" bgcolor="#ff9900">
Column #2
</td>
</tr>
</table>

You'll note that even though I have the vertical black lines set to a width of one pixel, they are actually about 5 pixels wide. This is as narrow as they can be rendered.

Making Vertical Lines:
Method #2

The professional approach to getting narrow, colored lines that look the same in both browsers is to use graphics -- an image of a line. You begin by getting or creating an image of a line.

The black lines to the left, right, and above are actually 2pixel wide images I made with Image Forge (a shareware I heartily recommend). This image method has nothing to do with <tables>s, but it has everything to do with using vertical lines and page layout.

Line images that are placed like any other image just like you learned in Beginning HTML. Of course, the flexibility here is as broad as your image drawing application. You may put the image in a <table> cell for more precise or offbeat positioning.

The benefits of using an image for vertical and horizontal lines are many:

You can make the lines any color you'd like or any blend of colors. The color of the image will be rendered in both browsers.

You can add designs or any other graphical enhancements you choose.

You can make images as narrow as a single pixel.

You have a wide variety of positioning options from the basic image positioning by using ALIGN in the <img> tag to putting the image in a layout table cell or even it's own table.

One criticism of using image lines is that images take time to download. Well, lines are usually not very complex images. Most of these image files are less than 1 kilobyte and load very quickly. Don't let file size be a deterrent to using graphical lines until the file size for a line gets over 10KB.

Exercises

Get Image Forge, or another free drawing program that will let you save images in either GIF or JPG format. You can even use Window's Paint to make practice lines. Paint produces larger file size bitmap (BMP) images.

Of course, if you're comfortable with Window's Paint, you can make your images in Paint, save them as BMP files, and then use an image viewer, like IrfanView, to convert them to JPGs or GIFs.

Get good at making simple colored lines in an image editor and then apply them to your pages. Place a lot of emphasis on using vertical lines because they're a little more tricky to position than horizontal lines.

The code for placing vertical lines on both sides of some content is:

<img src="myLine.gif" align="left">
<img src="myLine.gif" align="right">
CONTENT BETWEEN THE LINES

Remember to always put the <img> tags before the enclosed content and to use the ALIGN attribute, even on left aligned images.