Vol. 1, No. 43
The Basics of Tables

Using tables is one of the basic Web-building skills. Once you've got it down, your pages seem to just come together; but if tables aren't your strong suit, you'll have trouble getting things to line up just the way you want them. HTML tables were originally designed, as the name implies, for charts and similar grid-shaped displays of tabular information. But under the influence of resourceful Web designers, they've grown into ever so much more than that: in the absence of another way to control where elements appear on an HTML page, tables have taken on that duty with a vengeance. You can use them to position text and images in exactly the way you want.

Tables are those things that begin with a <TABLE> tag and end with a </TABLE> tag. In between they have all kinds of goodies. TR is the tag that initiates a new horizontal row; TD is the tag that denotes a cell within a row. All three of these tags should appear in every table, along with their closing counterparts. But it's the attributes of these tags that start to make life interesting.

The TABLE tag takes several attributes. BORDER is the thickness of the border around the outside of the cells, in pixels. Generally, BORDER=0 is best for straight-ahead layout work, where you don't want it necessarily to look like a table. If you're creating a chart, though, and want to make it easy to follow, borders are good. CELLPADDING and CELLSPACING are also useful for fine-tuning how your table spacing looks. CELLPADDING specifies the number of pixels between the outside of each cell and whatever's inside it: a high number will give you a ton of empty space in your table, a low number will do the opposite. And CELLSPACING is the number of pixels between cells, very useful for layout purposes. Actually, if BORDER=0 and you don't color in your table cells, there's not much difference between the behavior of CELLPADDING and CELLSPACING.

WIDTH and HEIGHT are the real workhorses when it comes to doing page layout with tables. You can specify the width and height of your table in pixels, which is tricky, because you don't know how big your users' browser windows are or what their screen resolution is (pixel-width is best used just for laying out images); or in percentage, which is awesome, because that makes the tables stretch and squeeze to fit exactly the way you want. So <TABLE WIDTH="80%"> will create a table that's always 80 percent of the width of the browser window, whereas <TABLE WIDTH="500"> will create a table that's 500 pixels wide, and that may stick off the edge of the browser window if the latter's too narrow. WIDTH works together nicely with ALIGN, to align the table to the LEFT, CENTER, or RIGHT of the page.

Drilling on in, we get to the TR tag, which, if you remember what we said three paragraphs ago, denotes a single row in the table. Inside each TR tag you'll find TD tags. The ALIGN attribute here controls the positioning of the content within the row, whether it's aligned LEFT, CENTER, or RIGHT; and the VALIGN attribute controls vertical alignment, be it TOP, CENTER, BOTTOM, or BASELINE. And BGCOLOR unleashes the wonderful world of color: it accepts RGB hex data to make the background of the row any color you like.

And so onward we press, to the TD tag, the smallest unit of the table. TD also accepts ALIGN, VALIGN, and BGCOLOR attributes, overriding whatever the TR may have said. In addition, the WIDTH and HEIGHT of each cell can be individually specified, again in pixels or in percentage.

One crucial trick to make your layout more than a rigidly regular grid is the use of the COLSPAN and ROWSPAN attributes. COLSPAN controls how many columns the cell in question spans; so you can have a single cell take up an entire row, to serve as a header or a banner headline; or just take up a couple of columns; or whatever. Similarly, ROWSPAN allows you to have a single tall cell take up a whole bunch of vertical rows.

Last but not least, NOWRAP constrains the text within a cell to prevent it from wrapping around at the end of a line.

And, well, that's the gist of what there is to know about HTML tables, dear listeners. When you visit a site that's really laid out swell, view their source and see just how they manage their tabular magic.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

If you don't specify, CELLPADDING and CELLSPACINGdefault to 2. If you want all your table data run together (for example, if you're using a table to construct one big image out of a lot of little image files, and you want it to be seamless) you have to specify CELLPADDING=0 and CELLSPACING=0.

Writing HTML code to generate tables is an extremely good opportunity to practice your code-indenting habits. Compare this:

<table>
<tr>
<td>This</td>
<td>Is</td>
</tr>
<tr>
<td>My</td>
<td>Table</td>
</tr>
</table>

and this:

<table>
<tr>
<td>This</td>
<td>Is</td>
</tr>
<tr>
<td>My</td>
<td>Table</td>
</tr>
</table>

Which is easier to read? For complex tables, even more so.

Sometimes, instead of doing laundry, you can just buy new socks. Eventually, though, you'll find that it's better to do the laundry.

RESOURCES:

Webmonkey on tables 1

Webmonkey on tables 2

All about tables, from the W3C

Handcrafted Archive