Create Simple HTML Tables

Revision as of 01:07, 20 May 2008

I love tables. I know, I know. I'm a geek. But I really do.

I remember when I first discovered tables, back in the days of Netscape 1.1. I stayed up all night and had a transcendental experience around 4 a.m. Finally, I could control where things fell on a page!

Well ... kinda. Actually, the beauty of tables is that they're flexible. You can make them spread out, and take up the whole page (no matter how wide the user makes it). Or you can make them rigid, and force the page into a certain shape. The choice is yours. You're in control.

But today we're starting with the basics.

This tutorial, originally submitted by Webmonkey writer Derek Powazek, is a wiki. Portions of it may be outdated, but it is well-loved, so it has been preserved here for historical purposes.

Cans and Can'ts

The first step to understanding tables is knowing what shapes you can make with them. Start with a grid:

That's doable in a table. You can also begin to remove lines:

The grids above are also doable. But this below is not:

Basically, if you can draw it in a grid, and it's not shaped like an L, you can put it in a table. And if you understand what you can and can't do right from the beginning, you'll save yourself lots of hassle in the long run.

The Basics

There are three basic units in any table:the table, the table row, and the table cell. The tags for these are:

Table:<table>

Table row:<tr>

Table cell:<td>

(An aside:Why is the tag for a table cell <td>? Well, there are two schools of thought on the matter. Some say it stands for "table data," and some say the Netscape engineers were on crack.)

The thing to remember here is that a <td> is always enclosed in a <tr>, which is always enclosed in a <table>.

Enough Already. Let's Do It!

OK. Let's make the basic table we outlined above. Here it is:

And here's the code:

<table border>
     <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
     </tr>
     <tr>
          <td>Cell 3</td>
          <td>Cell 4</td>
     </tr>
</table>

As you can see, the first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are sandwiched between the <td> and </td> tags.

In order to see the table, I added border to the table tag. This simply turns the border on. You can also specify its width by adding a number, as in <table border="5">. But be warned, this can be taken too far.

Colspan and rowspan

You can also make a cell in one row stretch across two cells in another. Like this:

To accomplish this, you have to use the colspan modifyer. Just add colspan=2 to the <td>, and voila!

<table border>
     <tr>
          <td colspan=2>Cell 1</td>
     </tr>
     <tr>
          <td>Cell 3</td>
          <td>Cell 4</td>
     </tr>
</table>

You can also do this:

Just add rowspan=2 to the <td>, like so:

<table border>
     <tr>
          <td rowspan=2>Cell 1</td>
          <td>Cell 2</td>
     </tr>
     <tr>
          <td>Cell 3</td>
     </tr>
</table>

Just remember:Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.

Now you're ready for the really fun stuff:alignment, cell padding, cell spacing, and, of course, the transcendental experience tag, which are all covered in my [Format HTML Tables] article.

Introduction

What you'll need

Steps

Alternate methods

Suggested readings