Guide to Tables
THE TABLE TAGS
- <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.
THE TABLE ATTRIBUTES
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
A LITTLE MORE CONTROL
- 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.
- 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
- 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.
- 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.
STUFF AND BOTHER (THE DETAILS)
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: