Q. Which screen resolution should you design your page for?

A. Yes!

Flexible Page Layout Using Tables

Author: James Shook
Author's Site: JShook.com

Author's Note

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.

Introduction

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:

See 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.

Disclaimer:
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.