★ wanayoo — archive 1999 http://wdvl.com/Authoring/HTML/Tutorial/table_in_table.html

Tables Inside of Tables

Selena Sol

You can quickly see how much more control over layout is afforded by tables. By making the table BORDER invisible, you can layout pictures and text in all sorts of creative ways.
However, a real mastery over layout necessitates setting tables within tables.
Below is an example of how you might use tables within tables to achieve a fairly complex design (Okay, so I had to shrink it so small you can't read the text, but you can get a good idea about the layout).

The line art drawing below shows the layout of the table within a table.

Let's take a look at the code necessary to create the above web page....

<HTML>
<HEAD>
<TITLE>Electric Eye Pte Ltd</TITLE>
</HEAD>
<BODY BGCOLOR = "#000000" 
            TEXT = "#000000">

<CENTER>

<!-- Here is the beginning of the outermost 
table -->

<TABLE BORDER = "0" CELLSPACING = "0" 
            CELLPADDING = "0">

<!--The first table row is reserved for a title 
image that spans both table columns -->

<TR>
<TD COLSPAN = "2" VALIGN = "BOTTOM">
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2FImages%2Ftitle_bar.gif&y=1999" 
            WIDTH = "625" 
            HEIGHT = "63" HSPACE = "0" 
            BORDER = "0" 
            VSPACE = "0" ALIGN = "LEFT">
</TD>
</TR>

<!-- The next table row is divided into two 
columns.   The first column is a set of 
navigation buttons.  This column will be colored 
blue to get the side bar effect.  The title image 
above actually had the blue coloring permanently 
drawn in -->

<TR>

<TD BGCOLOR = "#3366cc" WIDTH = "130" 
    VALIGN = "top">
A bunch of clickable images go here.
</TD>

<!-- The second column in the main table is 
another table! -->

<TD BGCOLOR = "white" WIDTH = "493" 
       VALIGN = "top">
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2FImages%2Fdot_clear.gif&y=1999" 
            HEIGHT = "1" 
            WIDTH = "490" BORDER = "0">

<TABLE BORDER = "0" CELLPADDING = "0" 
            CELLSPACING = "0">


<TR>

<!-- next come the two top text sections -->

<TD VALIGN = "top">
<FONT FACE = "Arial">
A bunch of text goes here
</FONT>
</TD>

<TD VALIGN = "top">
A bunch of text goes here
</TD>

</TR>

<!-- In the next row, we have one text piece 
that spans two columns -->

<TR>

<TD VALIGN = "top" COLSPAN = "2">
A bunch of text goes here
</TD>

</TR>

<!-- Yet another row is used for footer 
information -->

<TR>
<TD COLSPAN = "5">
footer goes here
</TD>
</TR>

<!-- Now we can close both the main and the 
secondary tables. -->

</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>