Site hosted by Angelfire.com: 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

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

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

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

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