Go to Lesson #15: ListsGo to lesson #17: Working With FramesRulers

Sometimes it is necessary to separate sections of text. You can do this with a graphic image or you can use the built-in horizontal ruler tag.

An example of a horizontal ruler is shown below.


The code to create this ruler is trivial.

<hr>

That's all you need to do to get a nice, clean, simple ruler. If you want to make it a little more pretty, you can change the color very easily. Let's say you wanted a red ruler. You would just specify "color=red" as part of your rag, as shown below.

<hr color="red">

This produces a nice red colored ruler.


Of course, you may not want the ruler to be the entire width of the page. You can change the width easily to either a percentage or a specific number of pixels. Both methods are shown below.

<hr color="#FF0000" width="80%">
<hr color="#FF0000" width="200">

The first tag creates a line which is 80% of the width of the table cell that it's contained in. The second creates a line which is exactly 200 pixels wide. 



Okay, so you want a wider line? Here's how you do that:

<hr color="#FF0000" width="80%" size="10">

Which produces the following:


You also have the option of aligning the line to the right, left or center.

<hr color="#FF0000" width="80%" size="10" align="right">