Tables Inside of Tables
- 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 = "./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>
Additional Resources:
Table Row Attributes
Introduction to Web Design | Table of Contents
Invisible Spacers
|
