tableusing
colored borders
Here is the Image that we will be using in the following tables.

<IMG SRC="usf2.gif" WIDTH=136 HEIGHT=100 ALT="FLAG">

FLAG

Lets use the colors of the flag, RED, WHITE and FLAG BLUE for the Table Border Colors. We will exaggerate the borders to better see the effect
<TABLE BGCOLOR=RED BORDER=17>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR=WHITE BORDER=15>
<TR><TD ALIGN=CENTER>
<TABLE BGCOLOR="#2F2F4F" BORDER=13>
<TR><TD ALIGN=CENTER width=300 height=200>
<IMG SRC="usf2.gif" WIDTH=136 HEIGHT=100 ALT="FLAG">
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
spacer
FLAG

I'm sure this is not what you expected. Where did all that EXTRA BLUE color come from? On I.E it comes from the text color. On Chrome same thing only it's BLACK and comes from the browser default text color. As you can see the blue border became the background color for the flag and not just the border as was intended. We could make another table but that would only amplify the problem.

Here is a very simple CSS solution to the problem and an opportunity to use Cellpadding to size the blue cell and center the flag in it.
Here is a Separate Tutorial describing basic CSS implementation.

HTML

<TABLE class=tablered>
<TR><TD>
<TABLE class=tablewh>
<TR><TD>
TABLE class=tableblu>
<TR><TD>
<IMG SRC="usf2.gif"
WIDTH=136 HEIGHT=100 ALT="FLAG">
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>

RESULT

FLAG

C S S

<style>

.tablered{ background-color:#ff0000; border:7px solid #ff0000;}
.tablewh{ border:5px solid #ffffff; background-color:#ffffff;}
.tableblu td{
border:3px solid #000513;text-align:center;
background-color:#2f2f4f; padding: 50px 75px 50px; }

</style>


The back button will take you back to Table Lesson One

back button

home Valid CSS! HTML Hit Counter