table
colored borders
FLAG


Lets use the colors of the flag, RED, WHITE and BLUE for the Table Border Colors




<TABLE BGCOLOR=RED BORDER=7 WIDTH=300 HEIGHT=200>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR=WHITE BORDER=5 WIDTH=300 HEIGHT=200>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR="#2F2F4F" BORDER=3 WIDTH=300 HEIGHT=200>
<TR><TD ALIGN=CENTER>
<IMG SRC="usf2.gif" WIDTH=136 HEIGHT=100 ALT="FLAG" BORDER=0>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>

FLAG




  As you can see the blue border became the backgound color for the flag and not just the border as was intended. The solution is to make another table for the background and this time make

THE BORDER=O

This brings up an important point. Always make the border of the table that contains the image EQUAL TO ZERO when the size of the table used is LARGER than the image used.

This is also a good place to demonstrate cellpadding and cellspacing. We will set the cellspacing at zero and make the cellpadding 30 so that the flag will be centered in the table. Using this technique we can create an equal off set for our Image and the width and height of the tables do not have to be specified.




<TABLE BGCOLOR=RED BORDER=7 CELLPADDING=0 CELLSPACING=0>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR=WHITE BORDER=5 CELLPADDING=0 CELLSPACING=0>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR="#2F2F4F" BORDER=3 CELLPADDING=0 CELLSPACING=0>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR="#6495ED" BORDER=0 CELLPADDING=60 CELLSPACING=0>
<TR><TD ALIGN=CENTER>
<IMG SRC="usf2.gif" WIDTH=136 HEIGHT=100 ALT="FLAG" BORDER=0>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>

FLAG

back button

beseencounter