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:

Cell contents Cell contents
Cell contents Cell contents

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.

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: