Here's a simple 2 x 2 table with 1-pixel cell borders:
 

<TABLE BORDER="1"><CAPTION>Simple 2 x 2 Table</CAPTION>     <TR><TD>upper left</TD>     <TD>upper right</TD></TR>     <TR><TD>lower left</TD>     <TD>lower right</TD></TR></TABLE>

Simple 2 x 2 Table upper left upper right lower left lower right

You can include as many rows in a table or cells in a row as you like, but be careful to maintain consistency in the number of table data cells in each table row. Inconsistencies can cause mis-placement of cells or worse (see below).

Table Attributes

A table tag doesn't specify the number of rows or cells in the table.  The browser has to figure that out from the enclosed <TR> and <TD> tags.  Closing </TD> tags are optional, but can keep the browser from getting confused over tables with irregular cells.

The BORDER=n attribute specifies border width.  The default border is 2 pixels (see above); set BORDER=0 to eliminate the border.
The BORDERCOLOR=#RRGGBB attribute controls the color of the border, if visible.
The CELLPADDING=n attribute specifies the interior pixel padding between each cell's borders and its content.
The CELLSPACING=n attribute specifies the pixel spacing between adjacent cells.

Note that you can specify minimum table dimensions in pixels or as a percent of page dimension.  You can specify minimum cell dimensions in pixels, or as a percent of table dimension.  The cell dimensions apply to subsequent rows until new dimensions are specified.

The ALIGN=(LEFT, CENTER or RIGHT) attributes in the  <TABLE> tag controls horizontal placement of the table on the page.  If you use the ALIGN attribute in a <TABLE> tag to position the table at the left or right side of the page, the other text on the page will wrap around the table.  Default ALIGN is LEFT.  You can specify pixel buffers on the sides and/or top and bottom of the table with the HSPACE= and VSPACE= attributes.

The ALIGN=(LEFT, CENTER or RIGHT) attributes in the <TR> and <TD> tags of elements within entire rows or individual cells in a row.  Default ALIGN is LEFT.

The VALIGN= (TOP, MIDDLE, BOTTOM) option in <TR> and <TD> tags controls the vertical  placement of elements within entire rows, or individual cells in a row.  Default VALIGN is MIDDLE.

The HEIGHT= attribute controls the minimum height of the table; if the contents require a taller table, it gets enlarged.  The WIDTH= attribute controls the width of the table strictly.  Specify these values in pixels, or as a percent of browser window height.

The BGCOLOR=#RRGGBB attribute in a <TABLE>, <TR> or <TD> tag lets you specify the background color for a table, an individual row, or an individual cell.

The BACKGROUND=url attribute in a <TABLE>, <TR> or <TD> tag lets you specify a background image for a table, an individual row, or an individual cell.

Attributes specified  in <TD> tags override options in <TR> tags, which override options in <TABLE> tags.
 

If you don't specify cell dimensions, the browser will size them in proportion to the relative sizes of their contents.  It's easier for browsers to handle tables with widths specified in pixels rather than percents of page width.  Avoid specifying cell widths as percents of table width unless the table width is specified in pixels.

If you want to control line breaks in a cell, include a NOWRAP option in the <TD> tag.  Otherwise you can control spacing with <BR> tags and &nbsp; (non-breaking space) characters.

If you want to get fancy, and have column rules but no row rules, or have just have rules between row groups, specify a RULES= (NONE, ROWS, COLS, ALL, GROUPS) attribute in the <TABLE> tag.  (You must have a non-zero BORDER specified for this to work.)   Group "header" rows in <THEAD></THEAD> tags, "body" rows in <TBODY></TBODY> tags, and "footer" rows in <TFOOT></TFOOT> tags.
 

You can include COLSPAN and ROWSPAN options in <TD> tags to make individual cells span a specified number of columns or rows.  <TABLE BORDER=2 CELLPADDING=1 CELLSPACING=0 WIDTH=200> <TR><TD COLSPAN=3 ALIGN=CENTER>Title</TD></TR> <TR><TD ROWSPAN=2>Left</TD><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	Title Left 1 2 3 4
Be sure each row has the same cell count. Otherwise, you get rows with different  numbers of cells and blank spaces; these aren't handled consistently by different browsers. <TABLE BORDER=2 CELLPADDING=1 CELLSPACING=0 WIDTH=200> <TR><TD ALIGN=CENTER>Title</TD></TR> <TR><TD>Left</TD><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>3</TD></TR> </TABLE>	Title Left 1 2 3 4
Here the default column widths are determined by proportional widths of the cell contents (partly a function of font type).  It's usually better to specify cell widths.
Eliminating table borders with BORDER=0 minimizes page clutter by disguising the table. Here's a cheap compass rose constructed with variable-width text in a simple 5x5 table.  Kind of clunky, but it downloads faster than an equivalent GIF. You have probably realized that most of this page is structured in 2-column tables with hidden borders.  Note that nesting tables more than two deep can confuse some browsers!	NW N NE \ | / W -- * -- E / | \ SW S SE

Creative uses of tables

You see more tables on the web than you realize, because most tables have zero borders, and are used to control layout.  Tables have lots of uses.  You can present text in newspaper-style columns, or use them to organize forms.
 

You can use a table to set off a block of text with a background color. This text is in a single-cell table with zero BORDER and CELLSPACING, and CELLPADDING=10

You can use tables to control placement of text on the page.  Since <P>, <Hn>, <DIV>, <CENTER> and <BLOCKQUOTE> are all block-level tags, you can't use these to change alignment on a single line.  If you want to combine left-justified, centered and/or right-justified text on the same line, use a table with ALIGN specified in each <TD> (table data) tag:
 

left-aligned text

centered text

right-aligned text

As discussed in the "Images" chapter, you can use zero-border tables to break up large images into smaller tiles that will download more quickly.  Just specify CELLPADDING=0 CELLSPACING=0, elimate unnecessary space characters, and specify BORDER=0 in the <IMG> tags in the table cells.  Similarly, you can use image tiles to create a large animated scene by including animated GIF's in some tiles and static GIF's in others--much more efficient than one huge animaged GIF.  A table of image tiles can also be used to simulate imagemapping.

Some table problems

Format tags within a table cell operate on that cell only. If you want to maintain a particular font or style through multiple cells, you must include these tags in each cell.

Finally, remember that when you specify table and cell dimensions in pixels, these are minimum values, and the cells will grow as necessary to accommodate the elements they contain.  The browser typically tries to allocate the empty space around cell elements evenly between the cells.