Guide to Tables

<TABLE ...></TABLE>

This is the main wrapper for all the other table tags, and other table tags will be ignored if they aren't wrapped inside of a TABLE tag. By default tables have no borders, borders will be added if the BORDER attribute is specified.

Right now TABLE has an implied linebreak both before and after it. We expect this to change so that you can eventually have as much control over placement of tables as you currently do over the placement of images. Aligning them to various positions in a line of text, as well as shifting them to the left or right margins and wrapping text around them.

<TR ...></TR>

This stands for table row. The number of rows in a table is exactly specified by how many TR tags are contained within it, regardless of cells that may attempt to use the ROWSPAN attribute to span into non-specified rows. TR can have both the ALIGN and VALIGN attributes, which if specified become the default alignments for all cells in this row.

<TD ...></TD>

This stands for table data, and specifies a standard table data cell. Table data cells must only appear within table rows. Each row need not have the same number of cells specified as short rows will be padded with blank cells on the right. A cell can contain any of the HTML tags normally present in the body of an HTML document. The default alignment of table data is ALIGN=left and VALIGN=middle. These alignments are overridden by any alignments specified in the containing TR tag, and those alignments in turn are overridden by any ALIGN or VALIGN attributes explicitly specified on this cell. By default lines inside of table cells can be broken up to fit within the overall cell width. Specifying the NOWRAP attribute for a TD prevents linebreaking for that cell.

<TH ...></TH>

This stands for table header. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold FONT, and have a default ALIGN=center.

<CAPTION ...></CAPTION>

This represents the caption for a table. CAPTION tags should appear inside the TABLE but not inside table rows or cells. The caption accepts an alignment attribute that defaults to ALIGN=top but can be explicitly set to ALIGN=bottom. Like table cells, any document body HTML can appear in a caption. Captions are always horizontally centered with respect to the table, and the may have their lines broken to fit within the width of the table.

BORDER

This attribute appears in the TABLE tag. If present, borders are drawn around all table cells. If absent, there are no borders, but by default space is left for borders, so the same table with and without the BORDER attribute will have the same width.

ALIGN

If appearing inside a CAPTION it controls whether the caption appears above or below the table, and can have the values top or bottom, defaulting to top.

If appearing inside a TR, TH, or TD it controls whether text inside the table cell(s) is aligned to the left side of the cell, the right side of the cell, or centered within the cell. Values are left, center, and right.

VALIGN

Appearing inside a TR, TH, or TD it controls whether text inside the table cell(s) is aligned to the top of the cell, the bottom of the cell, or vertically centered within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline. Values are top, middle bottom, and baseline.

NOWRAP

If this attribute appears in any table cell (TH or TD) it means the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.

COLSPAN

This attribute can appear in any table cell (TH or TD) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.

ROWSPAN

This attribute can appear in any table cell (TH or TD) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a TR will be truncated.

BORDER=<value>

By allowing the BORDER attribute to take a value, the document author gains two things. First they gain the ability emphasize some tables with respect to others, a table with a border of four containing a sub-table with a border of one looks much nicer than if they both share the same default border width. Second, by explicitly setting border to zero they regain that space originally reserved for borders between cells, allowing particularly compact tables.

CELLSPACING=<value>

This is a new attribute for the TABLE tag. By default Netscape 1.1 uses a cell spacing of two. For those fussy about the look of their tables, this gives them a little more control. Like it sounds, cell spacing is the amount of space inserted between individual cells in a table.

CELLPADDING=<value>

This is a new attribute for the TABLE tag. By default Netscape 1.1 uses a cell padding of one. Cell padding is the amount of space between the border of the cell and the contents of the cell. Setting a cell padding of zero on a table with borders might look bad because the edges of the text could touch the cell borders.

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

gives the most compact table possible.

WIDTH=<value_or_percent>

When this attribute appears on the TABLE tag it is used to describe the desired width of this table, either as an absolute width in pixels, or a percentage of document width. Ordinarily complex heuristics are applied to tables and their cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics and instead effort is put into fitting the table into the desired width as specified. In some cases it might be impossible to fit all the table cells at the specified width, in which case Netscape 1.1 will try and get as close as possible.

When this attribute appears on either the TH or TD tag it is used to describe the desired width of the cell, either as an absolute width in pixels, or a percentage of table width. Ordinarily complex heuristics are applied to table cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics for that cell and instead effort is put into fitting the cell into the desired width as specified. In some cases it might be impossible to fit all the table cells at the specified widths, in which case Netscape 1.1 will try and get as close as possible.

The proposed HTML 3.0 spec. allows you to abuse row and column spans to create tables whose cells must overlap. Don't do this, it looks awful.

You will eventually create a cell containing nothing but an image, and you will wonder why your image is not properly centered inside the cell. You probably wrote HTML like:

<td>
  <img src="url">
</td>

That extra whitespace inside your cell and around your image gets collapsed into single space characters. And it is these spaces (whose baselines by default align with the bottom of the image) which are making your cell look lopsided. Try this instead:

<td><img src="url"></td>