Introducton to Web Design Tables Inside of Tables

<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 = "./Images/title_bar.gif"
            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 = "./Images/dot_clear.gif"
            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>

Previous Page | Next Page