Maddog's HTML Primer for Real People

Chapter 11, Lesson 5

Ch 11, L 6 - Different Colored Cells: The Paper Effect

The following is an example of using a nested table with a different color in the background, to produce the graphic effect of a separate piece of paper with clickable "index tabs" attached.

Profound Comments
Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey...
Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey...
Hey! This might even make a good song, ya think?

<TABLE BGCOLOR="SILVER" BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=585>
<TR >
   <TD HEIGHT=35 WIDTH=35> </TD>
   <TD HEIGHT=35 WIDTH=35> </TD>
   <TD HEIGHT=35 WIDTH=480 ALIGN="CENTER"><A HREF="dummy.htm"><IMG SRC="tab_prev.gif" BORDER=0></A><A HREF="dummy.htm"><IMG SRC="tab_chap.gif" BORDER=0></A><A HREF="dummy.htm"><IMG SRC="tab_idx.gif" BORDER=0></A><A HREF="dummy.htm"><IMG SRC="tab_next.gif" BORDER=0></A></TD>
   <TD HEIGHT=35 WIDTH=35> </TD>
</TR>
<TR>
   <TD HEIGHT=35 WIDTH=35> </TD>
   <TD  WIDTH=550 COLSPAN=3 ROWSPAN=6 ALIGN="CENTER" VALIGN="TOP">
        <TABLE BGCOLOR="WHITE" BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR>
           <TD WIDTH=35> </TD>
           <TD WIDTH= 480 HEIGHT=425 ALIGN="LEFT" VALIGN="TOP">
     
<CENTER><H2>Profound Comments</H2></CENTER><P>Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey...
<P>
 Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... Mairzeedotes and doeszedotes and liddlelamzeedivey... 
<P>
Hey!  This might even make a good song, ya think?
             </TD>
              <TD WIDTH=35> </TD></TR>     
        </TABLE>
    </TD>
</TR>
<TR>
   <TD HEIGHT=80 WIDTH=35><A HREF="idea1.htm"><IMG SRC="tab_ide1.gif" BORDER=0></A></TD>
</TR>
<TR>
   <TD HEIGHT=80 WIDTH=35><A HREF="idea2.htm"><IMG SRC="tab_ide2.gif" BORDER=0></A></TD>
 </TR>
<TR>
   <TD HEIGHT=80 WIDTH=35><A HREF="idea3.htm"><IMG SRC="tab_ide3.gif" BORDER=0></A></TD>
 </TR>
<TR>
   <TD HEIGHT=80 WIDTH=35><A HREF="idea4.htm"><IMG SRC="tab_ide4.gif" BORDER=0></A></TD>
 </TR>
<TR>
   <TD HEIGHT=100 WIDTH=35> </TD>
 </TR>
</TABLE>

Overseer: Monty Northrup ...

... leave e-mail ...