Q. Which screen resolution should you design your
Flexible Page Layout Using Tables
Author's Site: JShook.com
I wrote this tutorial in September of 2000. At that time, support
for CSS-P in existing browsers was incomplete and/or buggy. At
that time most pages were created using tables since support for
this older technology was more consistent are reliable. Since then,
browser support for CSS-P has improved, and using tables as the
foundation for a web page's structure has become, by some,
denigrated. This tutorial takes no position on this issue. If you
want to use tables, then here are some techniques you can use.
But you should be aware that the techniques used in this tutorial
may not validate completely under some document types. If 100%
validation is a goal you want or are contractually required to
provide, then this tutorial will not be of much use. However, I
have found that the techniques shown in the tutorial continue to
work (if not fully validate) in existing browsers with a loose
(HTML 4.0 transitional) or no document type, so if you find that
acceptable, you may find the information presented here useful.
Instead of poring over the latest statistics on screen sizes being
used by web surfers and trying to come up with an ideal resolution
to design for, why not design pages that work for all of them?
If you use tables as the basic building block of your pages, you
can create sites that work well in a wide range of window sizes.
Viewers with smaller windows won't see as much of your content
as those using larger ones, but everyone should be able to see
the basic components of your site interface, and as much content
as will fit on their screen.
Using tables won't be the right approach for every site, but a
wide range of site designs can be implemented with this method.
I've created a basic interface for a fictional web site, and used
a page structure for it that is typical of many sites. In the following
pages, I'll show one way to take the design and implement it with
flexible tables. The result is a page structure that works well
in a wide range of window sizes.
As the site develops, you can see the work-in-progress by clicking
on the links that look like this:
the resizable pop-up window
When looking at the site in the pop-up, resize the window to see
what happens to the page.
There is always more than one way to implement a design in HTML.
At every point in this tutorial there may be other ways to achieve
the same effect. I'll use the methods that I've learned, explain
them as I go, and hope that you see something that can work on
your own pages.
For this tutorial, I have created a demonstration page for
what I intend to be a fictional company. No resemblance to any
real company is intended or should be inferred.
Now, it's time to start planning.