Supplement to
Colored Lines with Tables
variations below: height is the *center* panel which is the visual height of the line

1 height - 20% width
===============================divider===============================

2 height - 30% width
===============================divider===============================

3 height - 40% width
===============================divider===============================

4 height - 50% width
===============================divider===============================

5 height - 60% width
===============================divider===============================

7 height - 70% width
===============================divider===============================

8 height - 80% width
===============================divider===============================

9 height - 90% width
===============================divider===============================

10 height - 100% width
===============================divider===============================

here is the basic table code for colored lines, altered from Joe Barta's, with explanations

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH="100%">
     The table tag sets no spacing between or within cells so they fit closely together
<TR BGCOLOR="#CC99FF">
     This first row is set to a light shade of the line color
<TD><IMG SRC="empty.gif" WIDTH="1" HEIGHT="2" BORDER="0" ALT=""></TD>
     This is the table cell that actually gives shape to the color, with the height setting of the empty.gif defining the size.
     Joe's settings were a height of 1 for the top and bottom shadings, I have changed it to 2 for a little more depth.
</TR>
<TR BGCOLOR="#9966CC">
     This second row is set to the main shade of the line color
<TD><IMG SRC="empty.gif" WIDTH="1" HEIGHT="10" BORDER="0" ALT="===============================divider==============================="></TD>
     The table cell in this row used the height of empty.gif to set the primary visual height of the line.
     The ALT text is used to form a dividing line for text only browsers and voice readers.
</TR>
<TR BGCOLOR="#663399">
     This third row is set to the dark shade of the line color
<TD><IMG SRC="empty.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT=""></TD>
     This table cell sets the height of the shady side of the line.
     I like the look of a 1 here and a 2 in the row below as I used above, see the difference below.
</TR>
<TR BGCOLOR="#000000">
     This fourth and final row is set to black to complete the shading
<TD><IMG SRC="empty.gif" WIDTH="1" HEIGHT="2" BORDER="0" ALT=""></TD>
     The cell here gives the shadow height. Lines above used height=2, the one below uses height=1
</TR></TABLE>

10 height - 100% width with shading alteration as discussed above
===============================divider===============================
 

tutorial by MaMaT aka Holly Timm htmlhelp@comcast.net