<!-- Top Table -->
<TABLE BGCOLOR="E9E9E9" WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ROWSPAN="2" VALIGN="top" WIDTH="75"><IMG SRC="images/cell01.gif" WIDTH="75" HEIGHT="75" BORDER="0"></TD>
<TD VALIGN="top" BACKGROUND="images/cell-t.gif"><IMG SRC="images/cell-t.gif" WIDTH="30" HEIGHT="23" BORDER="0"></TD>
<TD ROWSPAN="2" VALIGN="top" WIDTH="75"><IMG SRC="images/cell02.gif" WIDTH="75" HEIGHT="75" BORDER="0"></TD>
</TR>
<TR>
<TD ALIGN="center"><IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle"><B>Tables + Images = Web Design</B><IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle"></TD>
</TR></TABLE>
<!-- Middle Table, Main Text Area -->
<TABLE BGCOLOR="E9E9E9" WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="23" BACKGROUND="images/cell-l.gif"></TD>
<TD WIDTH="10"> </TD>
<TD VALIGN="top">
<P>This design - the blue box, red inner border, light grey area for text - is created with Images in Cells. This is where Tables become "fun" (in quotes because although the results are nice, you really have to pay attention to details).</P>
<P>The really nice thing about this type of Table is no matter how much text I put here or what size your browser window is, this Table and the Images will adjust to fit - within the white area of this web page - and you can easily change the light grey background to any color you want.</P>
</TD>
<TD WIDTH="10"> </TD>
<TD WIDTH="23" BACKGROUND="images/cell-r.gif"></TD>
</TR></TABLE>
<!-- Bottom Table -->
<TABLE BGCOLOR="E9E9E9" WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ROWSPAN="2" VALIGN="bottom" WIDTH="75"><IMG SRC="images/cell04.gif" WIDTH="75" HEIGHT="75" BORDER="0"></TD>
<TD ALIGN="center"><IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle">The Footer Goes Here.<IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle"></TD>
<TD ROWSPAN="2" VALIGN="bottom" WIDTH="75"><IMG SRC="images/cell03.gif" WIDTH="75" HEIGHT="75" BORDER="0"></TD>
</TR>
<TR>
<TD VALIGN="bottom" BACKGROUND="images/cell-b.gif"><IMG SRC="images/cell-b.gif" WIDTH="30" HEIGHT="23" BORDER="0"></TD>
</TR></TABLE>

<TABLE BGCOLOR="E9E9E9" WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD COLSPAN="2" ROWSPAN="2" VALIGN="top" WIDTH="75"><IMG SRC="images/cell01.gif" WIDTH="75" HEIGHT="75" BORDER="0"></TD>
<TD VALIGN="top" BACKGROUND="images/cell-t.gif"><IMG SRC="images/cell-t.gif" WIDTH="30" HEIGHT="23" BORDER="0"></TD>
<TD COLSPAN="2" ROWSPAN="2" VALIGN="top" WIDTH="75"><IMG SRC="images/cell02.gif" WIDTH="75" HEIGHT="75" BORDER="0"></TD>
</TR>
<TR>
<TD ALIGN="center"><IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle">Header<IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle"></TD>
</TR>
<TR>
<TD WIDTH="23" BACKGROUND="images/cell-l.gif"></TD>
<TD WIDTH="52"> </TD>
<TD VALIGN="top">
<P>This version is one Table with three Rows, instead of three Tables on top of one another. This text area is now narrower. I had to add COLSPAN="2" to the four Cells with the corner images. I also had to change the width attribute of the two empty Cells on either side of this text to WIDTH="52" to keep the side images from stretching. The transparent image in the Header and Footer Cells is still there - invisible with BORDER="0".</P>
</TD>
<TD WIDTH="52"> </TD>
<TD WIDTH="23" BACKGROUND="images/cell-r.gif"></TD>
</TR>
<TR>
<TD COLSPAN="2" ROWSPAN="2" VALIGN="bottom" WIDTH="75"><IMG SRC="images/cell04.gif" HEIGHT="75" BORDER="0"></TD>
<TD ALIGN="center"><IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle">Footer<IMG SRC="images/10by52.gif" WIDTH="10" HEIGHT="52" BORDER="0" ALIGN="middle"></TD>
<TD COLSPAN="2" ROWSPAN="2" VALIGN="bottom" WIDTH="75"><IMG SRC="images/cell03.gif" WIDTH="75" HEIGHT="75" BORDER="0"></TD>
</TR>
<TR>
<TD VALIGN="bottom" BACKGROUND="images/cell-b.gif"><IMG SRC="images/cell-b.gif" WIDTH="30" HEIGHT="23" BORDER="0"></TD>
</TR></TABLE>