TABLE - HTML Tables

This element is also available in our updated HTML 4 reference. Some characteristics may have changed.

Appearance:	<TABLE> </TABLE>
Attributes:	ALIGN=left\|center\|right, WIDTH=`n`\|`p%`, BORDER=`n`, CELLSPACING=`n`, CELLPADDING=`n`
Contents:	One CAPTION, TR.
May occur in:	BODY, DIV, CENTER, BLOCKQUOTE, FORM, TH, TD and DD, LI.

Table start with an optional caption followed by one or more rows. Each row consists of one or more cells, which can be either header or data cells. Cells can overlap across rows and columns.

The ALIGN attribute controls the alignment of the table itself, but not of the individual cells. This can be set either in the TR element for an entire row, or in the TD and TH elements for individual cells. The WIDTH attribute can be a pixel width or a percentage. It indicates the suggested width of the table, although the browser can ignore this if it is not possible. A "100%" value means the table will span across the entire browser window.

You can specify the width of the border around the table with the BORDER attribute. This attribute only affects the width of that border, not of the lines between table cells. If the attribute is omitted, no border will be drawn.

However, you can increase the whitespace inside a table. The CELLPADDING attribute indicates how many pixels there should be between a cell's contents and the border. CELLSPACING indicates how much whitespace (in pixels) there should be between individual cells.

As an example, here is a table from the HTML 3.0 draft:

<TABLE BORDER=1>
  <CAPTION>A test table with merged cells</CAPTION>
  <TR><TH ROWSPAN=2><TH COLSPAN=2>Average
  <TH ROWSPAN=2>other<BR>category<TH>Misc
  <TR><TH>height<TH>weight
  <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
  <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>

This could appear as follows, in a text browser:

          A test table with merged cells
/--------------------------------------------------\ 
|          |      Average      |  other   |  Misc  |
|          |-------------------| category |--------|
|          |  height |  weight |          |        |
|-----------------------------------------|--------|
| males    |   1.9   |  0.003  |          |        |
|-----------------------------------------|--------|
| females  |   1.7   |  0.002  |          |        |
\--------------------------------------------------/

Notes:

Some browsers (in particular, the 1.x, 2.x and 3.x versions of Netscape) do not honor the ALIGN attribute on a table with a value of CENTER. For these browsers, enclose the entire table in a CENTER or <DIV ALIGN=CENTER> tag.
The downside of the above workaround is that on browsers that do not support tables, but do support centered text, the contents of the table will be rendered as centered. In some cases, this can be "fixed" by enclosing the contents of the table cell with something like <P ALIGN=LEFT>.
Avoid using pixel widths for a table. They force that the browser window is sized to a particular width to see the entire table, which is not always desirable, let alone possible. However, the first version of Internet Explorer does not support the WIDTH attribute with a percentage value.
Tables are often used for page layout purposes. This is not recommended, since it totally screws up the display for browsers which do not support tables, and it also often gives awkward results on small screens.
Earlier drafts of HTML 3.2 allowed the BORDER attribute to be given without value (and then the value defaulted to 1). The final version only permits BORDER=n.
The HTML 3.0 draft did not include the values for the BORDER attribute, so browsers which use this table model might draw a border around your table when you use BORDER=0.
An empty table cell is typically drawn differently than a non-empty cell. If you need a table cell with non content, but with the same appareance as a non-empty cell, put " " in the cell.

HTML 3.2 Reference ~ Elements by Function ~ Elements Alphabetically

Home, Forums, Reference, Tools, FAQs, Articles, Design, Links