Practical Web Design - Introduction to Tables, Part 1

If you take a tour of the poorer neighborhoods in my neck of the woods, you’ll find a lot of single-wide trailers. They aren't much to live in -- they're ugly, they're crowded, they leak, they have no style whatsoever -- but as domiciles, they're functional. They work. You can live in one and keep body and soul together.

Drive a few hundred yards in any direction and you find neighborhoods of small, older houses that bear a startling resemblance to the trailer parks down the street. The oldsters around here call them "shotgun houses," named for the prosaic reason that you can fire a shotgun through the front door and the shot will fly through every room of the house before it exits through the back door. The basic floor plans of both are simple: one room "stacked" next to another, next to another, like a single row of alphabet blocks laid end to end.

Amateurs learn to make Web pages like these shotgun houses, except where the shotgun house is built horizontally, the Web page is built vertically. The elements are stacked one on top of the other, like that same row of alphabet blocks stacked vertically. That's because most people learn HTML before they learn anything about Web design, and basic HTML is just marked-up text: take a chunk of text, mark it up, insert graphics and horizontal dividers hither and yon, and presto! You've got a Website.

For many people, this is enough. But for the rest of us, it's only a beginning. We don't want to design trailer-park Websites forever; we want to design cathedrals (or at least a nice two-bedroom bungalow with a little sun room and a breakfast nook)!

SitePoint is preparing to release Dan Shafers' new book HTML Utopia: Designing Without Tables Using CSS. There are plenty of other cutting-edge articles on SitePoint about working with advanced table design, designing "beyond" tables, and the like. I recommend them highly, if you're ready to step into such a rarefied atmosphere.

However, my "Practical Web Design" series is aimed at us grunts -- those of us out there who aren't really Webmasters (no matter what it might say on our business cards) and who aren't ready for table-less Web design. With that thought in mind, I created this column. Hopefully, after you read this column and implement some of the material therein, you'll be ready for the more sophisticated stuff. When that glorious day comes, SitePoint will be ready for you. Until that day comes... SitePoint is here to help you get there.

Note to veteran Web designers: this article covers ground you already know very well. Unless you find yourself in need of a refresher, you'll probably want to skip it and read something more challenging. You might, however, find it useful in teaching someone else how to design tables.

The Basics of Table Design

Let's get the basics out of the way first. There are hundreds of sites out there that will help you understand the basics of table layout; some of them are listed below, and there are plenty of others that are as good as, or better than, the ones I've included. Don’t forget the countless books on the local bookstore shelves, starting with HTML For Knuckleheads and going all the way through to cutting-edge design titles. I won't attempt to duplicate the information available in these resources, but I'll do a quick run-through of the various tags and design attributes of basic table layout. I recommend that you visit some of the sites listed below for additional help on understanding table construction.

Also worth noting: Marc Gugliuzza reminds us in his SitePoint article, Debate -- Hand Coding: The Ultimate Freedom, that laying out tables by hand is probably the most difficult task to perform in HTML. If you're not going to design a lot of Web pages, it might be worthwhile to use a WYSIWYG code editor such as Dreamweaver (pricey but excellent) or Arachnophilia (free and quite useful) to produce your table layouts. It takes some skull sweat to understand the ins and outs of tables -- if it's not worth your time, by all means let a program do the grunt work. But to quote Marc,

Web designers who use a program are at the mercy of their programs. Learning to code by hand gives you complete control over, and mastery of, the code.

Ok, back to it! Once you step into the wonderful, and wonderfully aggravating, world of tables, you've left the "shotgun house" paradigm of Web design behind. You're graduating into a higher level of layout and design.

Take a look at the way your local newspaper is laid out. Ignore the content, just look at how it's structured. It probably looks something like this:

This 3-column design with header is probably the most popular design style for most Web pages. Coincidence? Not at all. It's very familiar to most users, who find the familiar design style comforting and easy to navigate. It works, and it makes sense. There are plenty of other design styles, including the even simpler 2-column design (getting rid of the narrow right column), and the more sophisticated "nested float" styles, among many others, but let's not get ahead of ourselves.

I bet your newspaper's Website is designed with the same 2- or 3-column style. In fact, I bet 9 out of 10 sites you visit use one variant or another of the 2- or 3-column design layout, if they don't just use the "shotgun house" style of piling one item of content atop another ad infinitum. If it works so well, why muck around with it?