Images on this site were compressed using e-Vue MPEG4 technology in 2001, which was groundbreaking at the time for its DRM component and higher compression than JPG, however e-Vue is no more — we are transitioning these images to JPEG for 2004.
Nesting
The most complex layouts found on the Web have not been done in
any layout program, but by hand. This is because very complicated
designs require "nested tables" in order to keep all
sorts of elements from falling apart in relation to one another.
Illustration shows how nested tables within cells of a "master table" allow for complex layouts on Web sites.
Tables are really
designed to be used for a simple grid of columns, and you can
get a bit adventurous doing things like having a single vertical
column equal the height of two other blocks in another column.
You can even have one row be equal to four single columns on a
second row.
However, if you’ve ever tried to slice up a really complex
design in Adobe ImageReady or Macromedia Fireworks (or a similar
application), you’ve probably experienced the problem where
the resulting auto-generated HTML doesn’t always work. You
get gaps and empty blocks, and pieces that don’t line-up.
This is because HTML-based tables want to have fairly simple blocks
and the browser fails when you try too hard to make smaller pieces
work relative to larger ones.
Thus, the beauty of "nested tables." With this methodology,
you create what we call a "master table." This table
is the main block of your design, broken into obvious rectangles
that are usually no more than 2:1 as far as relative table cells
go. This means if you have one large area, there are usually not
more than two adjacent areas that equal the sum of the larger
area. You might have another adjacent area that has two more halves
of one of the first set of halves. To visualize this more easily,
look at the large illustration, at the "master table"
with three content areas.
To create complex layouts, you then make completely separate tables
that can contain their own layout of cells. In the illustration,
these are shown as nested table #1 and #2. Essentially, you create
a new table that has the exact dimensions of one of the cells
in the larger "master table." This placing of complete
tables within the cells of another table is where we get the term
"nested," and you can continue nesting tables further
inside the first nested table.
Viewing the illustration again, you can see the bottom composite
image shows how two nested tables inside two cells of a master
table results in a highly complex layout. If you tried to build
a single table with this type of table cell relationship, it would
not work.
