Look at enough home pages and you notice there are really only four or five shapes, dressed up differently. Here are the four I use. Each one has the code and a small working copy with the borders turned on, so you can see the skeleton. On your real page, set border="0" once it looks right.

A. The Sidebar
menu down the left, everything else on the right

WHAT YOU GET:

Percent or pixels? A 25% menu gets skinny on a small monitor and wide on a big one. If your menu has pictures in it, give that cell a pixel width instead, like width="150", and leave the width off the other cell so it takes whatever is left. If the menu is only words, percent is fine. This site uses 20%.

B. The Newspaper
a banner on top, a sidebar, a footer across the bottom

Same as A, with a row on top and a row on the bottom that each stretch across both columns with colspan:

WHAT YOU GET:

That works fine. But this site is built a little differently: the banner, the middle and the footer are three separate tables, one after another. It looks the same, and the banner shows up on a slow modem while the rest is still arriving. More on why in When It Breaks, number 8.

C. The Centered Column
for pages that are mostly reading

On a big monitor, a paragraph that runs the whole width of the window is a foot long, and your eye loses its place going back to the start of each line. Put the whole page in one table and center it:

Why 600? Plenty of people are still on 640x480 screens. A window that size, minus the scroll bar and the edges of the window, leaves you a little over 600 pixels before somebody has to scroll sideways, and nobody scrolls sideways. They leave. If you'd rather the column breathe a bit on bigger screens, width="85%" does nearly the same thing and never makes anyone scroll. Here's the percent version:

WHAT YOU GET:

D. The Thin-Line Box
my favorite trick, and every code box on this site

border="1" draws that raised, beveled, 3-D edge, which looks like every page from 1996. For a crisp one-pixel line instead, put a table inside a table:

WHAT YOU GET, AND THE OLD WAY BESIDE IT:

The outer table is black, with one pixel of padding. The inner table is white and sits on top of it, so exactly one pixel of black shows around the edge. Want a thicker line? cellpadding="2" on the outer table. Different color? Change the outer bgcolor. It looks the same in Netscape and in IE, which is more than I can say for almost anything else on this site.

Room between columns

Text in one column crowding up against the next? You can raise the cellpadding, or put an empty cell between the two as a gutter: <td width="15">&nbsp;</td>. Keep the &nbsp; in there. An empty cell does strange things in Netscape (page 3, number 3). Some people stretch a one-pixel see-through GIF in the gutter instead; that works too, and it's the only sure way to get a gutter narrower than a space.

On to 3. When It Breaks »