Site hosted by Build your free website today!

horizontal lines

these horizontal lines are created with html tables, they load much faster than graphic horizontal lines even though they use a 1x1 pixel transparent gif

they have a 3d appearance because they use three table rows each with a different background color

here is the html code
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr><td bgcolor="#FF99FF"><img src="transparent.gif" width="1" height="1" border="0"></td></tr>
<tr><td bgcolor="#CC66CC"><img src="transparent.gif" width="1" height="1" border="0"></td></tr>
<tr><td bgcolor="#993399"><img src="transparent.gif" width="1" height="1" border="0"></td></tr></table>

An even more convincing 3d effect can be achived with the addition of an extra table row

heres the html code, notice that the second table row is strethed to 3 pixels in height by the transparent gif

here is the html code
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr><td bgcolor="#FFFF99"><img src="transparent.gif" width="1" height="1" border="0"></td></tr>
<tr><td bgcolor="#CCCC66"><img src="transparent.gif" width="1" height="3" border="0"></td></tr>
<tr><td bgcolor="#999933"><img src="transparent.gif" width="1" height="1" border="0"></td></tr>
<tr><td bgcolor="#000000"><img src="transparent.gif" width="1" height="1" border="0"></td></tr></table>

  more horizontal rules

Another good reason to use html tables to create horizontal lines is that you can include text in the main table row and that allows you to make fast loading classy looking headers for each section of your page

note that all the tags along each table row touch

<tr><td><img src="transparent.gif"></td></tr>

If you seperate the tags the horizontal rules will not look right

example of incorrect formatting
<img src="transparent.gif">

Another common mistake is to set the width of the single pixel gif to 100%

This is how your horizontal rules will look if you make either of the two mistakes mentioned above


html tutorial    html tutorial    html tables tutorial    next :
previous :
tables within tables
the html table as a web page

html tutorial css tutorial javascript webmaster articles link exchange

html tutorial

make money
from your website