Table Using Colored Borders

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

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

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

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