Is the page too wide?
If you look at the site in a very wide window,
it may look a bit too wide and shallow. Is this
too much of a good thing?
I'll use one last technique that will keep the
page from expanding too much in big windows. I create
one more table, with just one cell, and set its
width to less than 100% of the window. All of the
tables I have made for the page go into this table.
I give the page a background color, set the background
of the content table to white, and allow the browser
to set page margins. The result is a page that still
expands on a larger window, but doesn't get too
wide--the best of both worlds!
the finished page
Download a zipped copy of the final
The table structure I used may seem quite
complicated. It's true that the finished
page uses a lot of tables, but each table
is very simple and has only one or two
functions in the overall design. I managed
to avoid specifying almost all cell dimensions--the
only cells I gave any width attribute at
all were the "balloon" cells.
Trying to set the size of table cells
in pages that are designed to be flexible
can be a puzzle. If you use pixels as your
unit, it's difficult to allow for flexibility
without leaving some cell dimensions blank.
You could try a mix of pixels and percentages.
But all browsers won't render tables using
hybrid pixel/percentage dimensioning consistently,
and if you leave some dimensions blank
you are inviting the browser to interpret
your page with more flexibility than you
I need the browser to interpret the layout
of the page if I want it to work in a range
of window sizes. But I want to make sure
that I leave it no choice about what parts
of the page may be squeezed or stretched
to fit the window. So instead of trying
to come up with a single table with completely-specified
dimensions, and hope it will somehow render
correctly in a window size that is different
from the one I designed it in, I exploit
some simple characteristics of table behavior
that I can rely on in any browser.
The demonstration page in this tutorial
could be seen as a study in virtual "mechanics." Only
two basic "forces" are at work:
expansion and resistance. Tables with a
width of 100% will expand until they meet
the resistance of the edges of the browser
window. A 100% width table nested inside
another table will expand until it meets
the resistance of another element in the
table, such as a graphic in an adjoining
cell. These two "forces" are
all I need to create the page. By thinking
about where I wanted expansion (to make
the page flexible) and where I should provide
resistance (to check that expansion so
as to preserve the size of page elements
that I wanted to be inflexible), I can
design a page that will always find a state
of balance in a wide range of window sizes.
Mouse over the three main page areas in
this diagram to see diagrams of the "forces" at
work in the table structures in the demonstration