Nested Tables
The use of tables vs. floating divisions to construct the page
layout is a personal preference. Use whichever you are most
comfortable with. Variable HTML will work the same way with
either design methodology.
| td # book top - - - col span = 3 |
td #
book
left
- - -
row
span
= 3 |
td # banner |
td #
book
right
- - -
row
span
= 3 |
| td # ads |
td
#
ad
sp |
div # top nav
div # sub nav
div # content div . two col
div . col 1 div . col 2 |
td
#
toc
sp |
td # toc
div # alt ads |
|
| td # credits |
| td # book bottom - - - col span = 3 |
If you decide to use tables for your layout, there is one problem that
you will need to work around. One of the primary design tools you will
use to change your layout as the page width gets smaller is dropping
columns. CSS does not support the colspan or rowspan table attributes.
If you have a company banner that spans multiple columns, and you drop
one or more of those columns from your layout, there is no way to modify
the colspan attribute of the banner.
The use of nested tables is the easiest way around this problem.
The coding of the blue outer table is greatly simplified when the
green content area is coded as a separate inner table and is
therefore considered by the blue table to be a single column
on a single row. All of the table entries that make room for the
book graphics can now span a consistent 3 rows or 3 columns and
the banner and credits only span the single column and therefore
do not require span attributes.
The coding of the green content table is also relatively
simple. It is a table that contains a single row with "up to"
5 columns. Note also that the website advertisements and
navigation are keyed twice. Change the width of your browser
window to see how the display: none and float
attributes are applied to various elements of the page
design to alter its display.
|
