How To Create HTML Tables

By Donald St. John

Create a basic table

Before you can do fancy stuff with table layout, you need to create a table. The <TABLE> and </TABLE> tags enclose all the other elements of a table. Each row in a table is set up with a <TR> (table row) tag, which is followed by a <TD> (table data) tag for each cell in that row. The following code sets up a simple 2-by-2 table:

<TABLE>
<TR>
<TD>Cell contents</TD>
<TD>Cell contents</TD>
</TR>
<TR>
<TD>Cell contents</TD>
<TD>Cell contents</TD>
</TR>
</TABLE>

The <TABLE>, <TR>, and <TD> tags all have various attributes that let you control the look of the table itself as well as the placement of its contents. (Read the rest of our table tips to get acquainted with them.) In the absence of those attributes, the table defaults to fit around the cell contents. Thus, in most browsers, the code above yields a borderless table that looks like this:

If you want to delve deeper into the mysteries of tables, check out the W3C table spec.

Add borders–then take them away

Tables don’t have to contain text only, of course. Most of the complex layouts you see on the Web combine images and text inside various table cells–you just can’t see the lines, or borders, between the cells. The BORDER attribute of the <TABLE> tag allows you to assign a thickness (in pixels) to the border lines.

To make a table with a border of 2 pixels, just add BORDER=”2″ to the <TABLE> tag. To make an invisible border, set the BORDER attribute to 0. (Although most browsers default to a table border of 0, specifically stating it ensures that the border will be invisible in all browsers.)

Below are two examples of what this looks like. On the left are the codes for one table with a 2-pixel border and another table with an invisible border. The finished products are on the right.

<TABLE BORDER=”2″> <TR> <TD>see our products</TD> <TD><IMG SRC=”duck.gif”></TD> </TR> <TR> <TD>find out about us</TD> <TD><IMG SRC=”eye.gif”></TD> </TR> </TABLE>

see our products find out about us

<TABLE BORDER=”0″> <TR> <TD>see our products</TD> <TD><IMG SRC=”duck.gif”></TD> </TR> <TR> <TD>find out about us</TD> <TD><IMG SRC=”eye.gif”></TD> </TR> </TABLE>

see our products find out about us

A trick: design the table with a visible border, which will show you just how your elements are broken up. When you have everything in place, change the BORDER attribute to 0.

Create seamless table layouts

Two of the most useful attributes for laying out table content are CELLPADDING and CELLSPACING. The CELLPADDING attribute controls the distance (in pixels) between the cell’s contents and its sides, while the CELLSPACING attribute controls the distance (in pixels) between the cells themselves. (The default for both is 2 pixels.)

It might not sound like there’s much difference between the two, but there is. The codes for the following tables are identical, except the first one sets CELLPADDING to 10 pixels:

<TABLE BORDER=”2″ CELLPADDING=”10″> <TR> <TD>see our products</TD> <TD><IMG SRC=”duck.gif”></TD> </TR> <TR> <TD>find out about us</TD> <TD><IMG SRC=”eye.gif”></TD> </TR> </TABLE>

see our products find out about us

The second one sets CELLSPACING to 10 pixels:

<TABLE BORDER=”2″ CELLSPACING=”10″> <TR> <TD>see our products</TD> <TD><IMG SRC=”duck.gif”></TD> </TR> <TR> <TD>find out about us</TD> <TD><IMG SRC=”eye.gif”></TD> </TR> </TABLE>

see our products find out about us

Now, if you want to create a perfectly seamless look where the contents of all the table cells touch one another, simply set the table’s BORDER, CELLPADDING, and CELLSPACING attributes to 0. The following code sets up a table with four images blending together to look like one:

<TABLE BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”0″> <TR> <TD><IMG SRC=”hat1.gif”></TD> <TD><IMG SRC=”hat2.gif”></TD> </TR> <TR> <TD><IMG SRC=”hat3.gif”></TD> <TD><IMG SRC=”hat4.gif”></TD> </TR> </TABLE>

Make cells the shape you want

HTML doesn’t stick you with plain grids for your table layout. With the ROWSPAN and COLSPAN attributes of the <TD> tag, you can make a given cell span the height or width of several other cells. To use these attributes, simply assign them a value based on the number of cells you want to span.

For instance, the following table has two rows of three columns each:

To make the first cell span all three columns, add COLSPAN=”3″ to its <TD> tag and delete the other two <TD> tags in that row:

If you’d like to make that first cell span two rows instead, add ROWSPAN=”2″ to its <TD> tag and delete the first <TD> tag from the second row:

Of course, you can make your tables far more complex than these examples. If you choose to do so, it’s always a good idea to sketch out your tables before you create them.

Make cells the size you want

Table cells size themselves to their content by default. But what if you want cells of a different size? Enter the WIDTH and HEIGHT attributes of the <TD> tag. Just specify the size in pixels, and you’re all set. To make a cell 100 pixels wide and 80 pixels high, for example, you’d do this:

Note that WIDTH and HEIGHT are only suggested attributes. That is, they take effect only if the cell’s set width or height doesn’t conflict with other cells in the same column or row.

Precisely place cell contents

Once you start changing the shape and size of table cells, the cells no longer shape themselves around their contents. Thus, to place elements where you want within such table cells, you need two attributes of the <TD> tag: ALIGN, which places objects LEFT, RIGHT, or CENTER within a cell; and VALIGN, which moves them up and down using the TOP, MIDDLE, and BOTTOM instructions. (By default, elements align horizontally to the left and vertically in the middle.) For instance, to align text to the top right in a 100-by-80-pixel cell, you’d use the following code:

Note: when you’re placing objects in table cells and you want them to align properly, don’t leave space after the opening <TD> or before the closing </TD> of a cell. The cell’s contents should touch the <TD> tags to ensure proper alignment, especially when you’re working with images.

Make your table colorful

Sick of having your table blend in with your page? Then change its background color! Just add the BGCOLOR attribute to the <TABLE> tag and assign it a standard hexadecimal color code or a one-word color name.

For example, this code creates a simple table with a pale blue background:

Depending on your browser and platform, you may see blank lines between the table cells. To ensure that the lines disappear in all browsers, set the table’s BORDER and CELLSPACING attributes to 0, like so:

Use empty cells for page layout

Many times, the best way to control the location of an element on your page is to bump it over by inserting an empty table cell that’s just the size you need. But be warned: while most browsers have no trouble with empty cells, Navigator has a tendency to collapse cells that have no content. Never fear, however: there are several ways to fix Navigator’s collapsing-cell bug. For example, you can insert a 1-pixel GIF and make its width the same as the table cell’s or insert a nonbreaking space. Or you can use Netscape’s <SPACER> tag.

The <SPACER> tag can ostensibly be used to create blank space anywhere on a page, but since it’s Navigator-specific, it’s best to avoid in general use. It’s perfect for this situation, though, because other browsers (which don’t have the collapsing-cell problem) simply ignore it. To use the <SPACER> tag, set its TYPE attribute to “block” and add WIDTH and HEIGHT attributes, both of which take pixel values, like so:

<SPACER TYPE=”block” WIDTH=”30″ HEIGHT=”45″>

No more collapsing table cells!

Place your table on the page

In addition to formatting elements within a table, you can control where your table appears on the page. Two <TABLE> attributes can help you out:

• The ALIGN attribute aligns the table LEFT, RIGHT, or CENTER on the page (left is the default).
• The WIDTH attribute lets you specify a fixed amount of pixels for the table’s width (by using a number, as in <TABLE WIDTH=”65″>) or lets you make the table occupy a percentage of the browser window’s width (by assigning a percentage, as in <TABLE WIDTH=”90%”>).

Thus, the following code sets up a table 150 pixels wide and centered on the page:

<TABLE WIDTH=”150″ ALIGN=”CENTER”>

The code below sets up a table three-quarters the width of the browser window, aligned on the right side of the page:

<TABLE WIDTH=”75%” ALIGN=”RIGHT”>

By Donald St. John, with additional material and advice from Cormac Foster,
Mark Kaufman, Charity Kahn, and Matt Rotter.