Maddog's HTML Primer for Real People

Chapter 11, Lesson 9

Ch 11, L 9 - Graphically Enhanced Page with Sidebar

This lesson uses nested tables to enhance the look and action of the web page, providing a clickable sidebar, a large area for the page caption, and an area for text. Here's the demo:

Really Cool Page
With Sidebars

go to Idea #1

go to Idea #2

go to Idea #3

go to Idea #4

All the following area available for additional text:

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.. .

<TABLE  BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=600>
<TR>
    <TD  WIDTH=460  ROWSPAN=9 ALIGN="CENTER" VALIGN="MIDDLE">
        <TABLE BGCOLOR="#FFCCCC" BORDER=0 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=460 HEIGHT=163 ALIGN="CENTER" VALIGN="MIDDLE"><FONT COLOR="MAROON" SIZE="+3"><B><I>Really</I> Cool Page<BR>With Sidebars</B></FONT></TD></TR>
       </TABLE> 
    </TD>
    <TD WIDTH=60 HEIGHT=15>
        <TABLE BGCOLOR="#FFCCCC" BORDER=0 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=60 HEIGHT=15> </TD></TR>
       </TABLE> 
    </TD>
    <TD WIDTH=60 HEIGHT=15>
    </TD>
    <TD WIDTH=20 ROWSPAN=9></TD></TR>
<TR>
    <TD WIDTH=120 HEIGHT=15 COLSPAN=2>
        <TABLE BGCOLOR="FUSCHIA" BORDER=1 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=120 HEIGHT=20 ALIGN="CENTER" VALIGN="MIDDLE"><A HREF="idea1.htm"><FONT SIZE="-1">go to Idea #1</A></FONT></TD></TR>
       </TABLE> 
    </TD></TR>
<TR>
   <TD WIDTH=60 HEIGHT=15>
        <TABLE BGCOLOR="#FFCCCC" BORDER=0 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=60 HEIGHT=15><FONT SIZE="-3"> </FONT></TD></TR>
       </TABLE> 
    </TD>
    <TD WIDTH=60 HEIGHT=15>
    </TD></TR>
<TR>
    <TD WIDTH=120 HEIGHT=15 COLSPAN=2>
        <TABLE BGCOLOR="FUSCHIA" BORDER=1 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=120 HEIGHT=20 ALIGN="CENTER" VALIGN="MIDDLE"><A HREF="idea2.htm"><FONT SIZE="-1">go to Idea #2</A></FONT></TD></TR>
       </TABLE> 
    </TD></TR>
<TR>
    <TD WIDTH=60 HEIGHT=15>
        <TABLE BGCOLOR="#FFCCCC" BORDER=0 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=60 HEIGHT=15><FONT SIZE="-3"> </FONT></TD></TR>
       </TABLE> 
    </TD>
    <TD WIDTH=60 HEIGHT=15>
    </TD></TR>
<TR>
    <TD WIDTH=120 HEIGHT=15 COLSPAN=2>
        <TABLE BGCOLOR="FUSCHIA" BORDER=1 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=120 HEIGHT=20 ALIGN="CENTER" VALIGN="MIDDLE"><A HREF="idea3.htm"><FONT SIZE="-1">go to Idea #3</A></FONT></TD></TR>
       </TABLE> 
    </TD></TR>
<TR>
    <TD WIDTH=60 HEIGHT=15>
        <TABLE BGCOLOR="#FFCCCC" BORDER=0 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=60 HEIGHT=15><FONT SIZE="-3"> </FONT></TD></TR>
       </TABLE> 
    </TD>
    <TD WIDTH=60 HEIGHT=15>
    </TD></TR>
<TR>
    <TD WIDTH=120 HEIGHT=15 COLSPAN=2>
        <TABLE BGCOLOR="FUSCHIA" BORDER=1 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=120 HEIGHT=15 ALIGN="CENTER" VALIGN="MIDDLE"><A HREF="idea4.htm"><FONT SIZE="-1">go to Idea #4</A></FONT></TD></TR>
       </TABLE> 
    </TD></TR>
<TR>
    <TD WIDTH=60 HEIGHT=15>
        <TABLE BGCOLOR="#FFCCCC" BORDER=0 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=60 HEIGHT=15 ><FONT SIZE="-3"> </FONT></TD></TR>
       </TABLE> 
    </TD>
    <TD WIDTH=60 HEIGHT=15>
    </TD></TR>
</TABLE>
<P>
<FONT COLOR="NAVY" SIZE="+1">All the following area available for additional text:</FONT>
<P>
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.. .

Overseer: Monty Northrup ...

... leave e-mail ...