Maddog's HTML Primer for Real People

Chapter 11, Lesson 11

Ch 11, L 11 - A Multi-Partitioned Web Page

In this lesson, we present a fairly complicated example of the use of tables, in which we partition the page into several colored sections, some for text, some for links, and some for graphics. Many commercial sites use this technique for generating web pages, often using a script (or server-side computer program) to automatically generate the HTML code. However, this demo was generated completely by manual-coding (by human power), to show that it can be done. Several levels of nested tables are utilized to accomplish this sophisticated look.

A MULTI-PARTITIONED WEB PAGE

check idea #1

check idea #2

check idea #3

check idea #4

Welcome to Our Cool Multipartioned Page
This page makes heavy use of nested HTML tables to achieve an interesting graphical web page without using image maps or frames.
So, ain't we just so cool? We're so cool, we're frosty. OK, OK...frosted... This is surely our entry into the HTML Hall of Fame. But forget one '<' or one closing tag and we're DOOMED to the HTML Mausoleum of Shame...

Hot List:

Maddog's Homepage

Numerous Scanned Photos

Creative Writings

search

request info

guestbook

e-mail us

<TABLE  BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
    <TD WIDTH=25 ROWSPAN=7></TD>
    <TD HEIGHT=25 WIDTH=35></TD>
    <TD HEIGHT=25 WIDTH=65></TD>
    <TD HEIGHT=25 WIDTH=275></TD>
    <TD HEIGHT=25 WIDTH=150></TD>
    <TD HEIGHT=25 WIDTH=35></TD>
    <TD WIDTH=25 ROWSPAN=7></TD></TR>
<TR>
    <TD HEIGHT=35 WIDTH=35></TD>
    <TD COLSPAN=3 ROWSPAN=2>
        <TABLE BGCOLOR="#E9C2A6" BORDER=0 CELLSPACING=0 CELLPADDING=0>
            <TR><TD WIDTH=490 HEIGHT=70 ALIGN="CENTER" 
                VALIGN="MIDDLE"><FONT SIZE="+2" 
                COLOR="NAVY">A MULTI-PARTITIONED WEB PAGE</FONT></TD></TR>
       </TABLE> 
    </TD>
    <TD HEIGHT=35 WIDTH=35></TD></TR>
<TR>
    <TD HEIGHT=35 WIDTH=35>
         <TABLE BGCOLOR="NAVY" BORDER=0 CELLSPACING=0 CELLPADDING=0>
              <TR><TD WIDTH=35 HEIGHT=35> </TD></TR>
         </TABLE>
    </TD>
    <TD HEIGHT=35 WIDTH=35>
        <TABLE BGCOLOR="#FFFF66" BORDER=0 CELLSPACING=0 CELLPADDING=0>
              <TR><TD WIDTH=35 HEIGHT=35> </TD></TR>
       </TABLE> 
    </TD></TR>
<TR VALIGN="TOP">
    <TD HEIGHT=150 COLSPAN=2>
        <TABLE BGCOLOR="NAVY" BORDER=0 CELLSPACING=0 CELLPADDING=0>
              <TR><TD ><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="idea1.htm"><FONT SIZE=-1>check idea #1</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD ><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="idea2.htm"><FONT SIZE=-1>check idea #2</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="idea3.htm"><FONT SIZE=-1>check idea #3</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="idea4.htm"><FONT SIZE=-1>check idea #4</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD> </TD></TR>
       </TABLE> 
    </TD>
    <TD WIDTH=250 ROWSPAN=4 ALIGN="CENTER" VALIGN="TOP">
        <TABLE WIDTH=250 BORDER=0 CELLPADDING=15 CELLSPACING=0 >
            <TR><TD>
               <CENTER><H2>Welcome to Our Cool Multipartioned Page</H2>
        This page makes heavy use of nested HTML tables to achieve an interesting graphical web page without using image maps or frames.<P>So, ain't we just so cool?  We're so cool, we're frosty.  OK, OK...frosted...  This is surely our entry into the HTML Hall of Fame.  But forget one '<' or one closing tag and we're DOOMED to the HTML Mausoleum of Shame...</CENTER></TD></TR>
        </TABLE>
    </TD>
    <TD COLSPAN=2 ROWSPAN=4>
        <TABLE BGCOLOR="#FFFF66" BORDER=0 CELLSPACING=0 CELLPADDING=0>
              <TR ALIGN="LEFT" VALIGN="TOP"><TD WIDTH=185 HEIGHT=350>
                  
                  <CENTER><FONT COLOR="RED" SIZE="+1"><I><B>Hot List:</B></I></FONT><BR>
                  <A HREF="http://www.io.com/~maddog/"><IMG ALIGN=MIDDLE SRC="bttn_md.gif" BORDER=0><BR>Maddog's Homepage</A><P>
                  <A HREF="http://www.io.com/~maddog/photos.htm"><IMG ALIGN=MIDDLE SRC="bttn_cam.gif" BORDER=0><BR> Numerous Scanned Photos</A><P>
                  <A HREF="http://www.io.com/~maddog/poems.htm"><IMG ALIGN=MIDDLE SRC="girlface.gif" BORDER=0><BR> Creative Writings</A> 
                  </CENTER>
              </TD></TR>
       </TABLE> 
    </TD></TR>
<TR>
     <TD HEIGHT=25 COLSPAN=2></TD></TR>
<TR>
    <TD HEIGHT=150 WIDTH=100 COLSPAN=2>
        <TABLE BGCOLOR="AQUA" BORDER=0 CELLSPACING=0 CELLPADDING=0>
               <TR><TD ><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="dummy.htm"><FONT SIZE=-1>search</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD ><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="dummy.htm"><FONT SIZE=-1>request info</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="dummy.htm"><FONT SIZE=-1>guestbook</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD><FONT SIZE=-4> </FONT></TD></TR>
              <TR ALIGN="CENTER" VALIGN="MIDDLE"><TD WIDTH=100 HEIGHT=20>
                    <TABLE BGCOLOR="WHITE" BORDER=0 CELLSPACING=0 CELLPADDING=0>
                       <TR><TD WIDTH=80 HEIGHT=20 ALIGN="CENTER"><A HREF="dummy.htm"><FONT SIZE=-1>e-mail us</FONT></A></TD></TR>
                       </TABLE> 
             </TD></TR>
              <TR><TD> </TD></TR>
       </TABLE> 
    </TD></TR>
<TR>
     <TD HEIGHT=25 COLSPAN=2></TD></TR>
</TABLE>

Overseer: Monty Northrup ...

... leave e-mail ...