BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity

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.



A-         A+

Table of Content

BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity

This webpage is also available in a fixed width template.

Variable HTML website, maintained with MySSI    
Copyright © 2012, BitWare Solutions