Why tables?

HTML was built for documents that read like a term paper: a title, then paragraphs, top to bottom. There is no tag that means "put this over here, next to that." So a few years ago people noticed that a table, which was meant for bus schedules and price lists, will hold anything you put in its cells: words, pictures, other tables, a whole page. Turn the borders off and nobody sees the grid. Nearly every good-looking home page you've visited this year is a table with the borders turned off. View Source on a few of them and you'll see.

Isn't that what style sheets are for? Someday. Style sheets can position things, on paper, and Internet Explorer 4 and 5 do a decent job of it. Netscape 4 is another story: nudge a box and it lands somewhere else, and resize the window and half your styles can disappear until you hit Reload. Until everybody's browser gets positioning right, tables are what works for everybody, including the kids in the school computer lab who are still on Netscape 3.

Who's writing this. I'm 25, a graduate student in Raleigh studying transportation engineering, which means my days are traffic counts and signal timing and my whole life is grids. I learned tables the hard way last year building the page for my research group, then my roommate's band page, and then answering the same handful of questions by e-mail from everybody who saw those. This site is those questions, answered once.

Before you start: I'm assuming you know the basic tags (body, p, font, img, a). If you've never written HTML at all, go through Lydia Cavanaugh's HTML from Scratch first. It's the best beginner's course I know of, and her students write me the most organized questions I get.

Rows, then cells

A table is graph paper. You don't draw columns. You draw rows, and you split each row into cells, and the columns happen by themselves when the cells line up. Three tags do it:

• <table> ... </table> goes around the whole thing.
• <tr> ... </tr> is one row ("table row").
• <td> ... </td> is one cell in that row ("table data").

WHAT YOU GET:

Two rows, two cells each, so two columns. The indenting is only for you; the browser ignores it. Every row should have the same number of cells. If one comes up short, the browser leaves a hole where the missing cell would be.

The attributes that do the work

On the <table> tag:

• border is the thickness of the lines, in pixels. 0 means no lines. For layout you'll always end up at 0, but build with border="1" so you can see what you're doing, and switch it off at the very end. If you remember one thing from this site, remember that.
  
  
• width is either a percent (100% of the window, or of whatever the table sits in) or a number of pixels. Leave it off and the table is only as wide as what's inside it.
  
  
• cellpadding is the room inside each cell, between its edge and its contents.
  
  
• cellspacing is the room between the cells, like the grout between floor tiles.
  
  
• bgcolor is the background color. It works on <table>, <tr> and <td>, and the smallest one wins.

People mix up padding and spacing all the time, so here are both, with the same 10 pixels:

Padding makes fat cells. Spacing pushes skinny cells apart. For layout you'll nearly always want cellspacing="0" and whatever padding looks right.

On the <td> tag:

• width: how wide that column should be, in pixels or percent.
  
  
• align: left, center or right, side to side.
  
  
• valign: top, middle or bottom, up and down. The default is middle, and that one fact is behind about half the e-mail I get. "Why is my menu floating halfway down the page?" Because the cell next to it is taller, and your menu is sitting in the middle of its cell, exactly as ordered. Put valign="top" on every layout cell. Every one.
  
  
• bgcolor: a color for just that cell.

Stretching a cell: colspan

A cell can stretch across two or more columns with colspan. That's how you get a title bar across the top of a two-column page:

WHAT YOU GET:

Count as you go. The first row has one cell, but it's two columns wide, so it counts as two, same as the second row. When the counts don't match, the table comes out lopsided. rowspan works the same way going down instead of across. I use it much less, because it's easy to lose count.

Tables inside tables

A cell can hold anything, including a whole other table. That's called nesting, and it's behind most of the tricks on page 2. Try not to go more than three or four deep. Every level is more work for the browser, and Netscape gets slow about it.

X-ray of this page

Here's what you're looking at right now with the borders turned on. Three tables, stacked:

Why three and not one big one? That's on page 3, number 8.

On to 2. Real Layouts »