Learning HTML 3.2 by Examples, section 5 Descriptions of HTML 3.2 tags:

TABLE - tables (Not in HTML 2.0!)

Purpose

To present information which logically forms a table, i.e. a matrix-like structure.

Typical rendering

More or less tabular but by default with no surrounding border. When a border is requested (with the BORDER attribute), a common approach, introduced by Netscape, renders tables in bas-relief, raised up with the outer border as a bevel, and individual cells inset into this raised surface. Borders around individual cells are only drawn if the cell has explicit content. White space doesn't count for this purpose with the exception of  . (Notice that there can be better ways to deal with empty cells than to use  .)

A table is generally sized automatically by a browser to fit the contents, but you can also set the table width using the WIDTH attribute.

Basic syntax

<TABLE>
rows of the table (TR elements)
</TABLE>

Possible attributes

attribute name possible values meaning notes
ALIGN LEFT, CENTER, RIGHT horizontal alignment of the entire table default is LEFT, but this can be overridden by an enclosing DIV or CENTER element; this attribute is deprecated in HTML 4.0
WIDTH width specification width of the entire table by default, width is determined by a browser to fit the contents
BORDER integer width of the frame, in pixels value of 0 (default) means no border; some browsers also accept plain BORDER with the same meaning as BORDER=1
CELLSPACING integer spacing between cells, in pixels see note below
CELLPADDING integer spacing (padding), in pixels, between the contents of a cell and the border around a cell.  

Typically the BORDER attribute (with nonzero value) sets the default value of CELLSPACING to 1. This means that by setting a border for the entire table you also set borders of one pixel for the individual cells.

In traditional desktop publishing software, adjacent table cells share a common border. This is not the case in HTML. Each cell is given its own border which is separated from the borders around neighboring cells. This separation can be set in pixels using the CELLSPACING attribute (e.g. CELLSPACING=10). The same value also determines the separation between the table border and the borders of the outermost cells.

Allowed context

Block container.

Contents

One or more TR elements, optionally preceded by a CAPTION element.

Examples

A basic example:

Example TABLE-1.html:

<TABLE>
<CAPTION>Areas of the Nordic countries, in sq km</CAPTION>
<TR><TH>Country</TH> <TH>Total area</TH> <TH>Land area</TH>
<TR><TH>Denmark</TH> <TD ALIGN=RIGHT> 43,070 </TD><TD ALIGN=RIGHT> 42,370</TR>
<TR><TH>Finland</TH> <TD ALIGN=RIGHT>337,030 </TD><TD ALIGN=RIGHT>305,470</TR>
<TR><TH>Iceland</TH> <TD ALIGN=RIGHT>103,000 </TD><TD ALIGN=RIGHT>100,250</TR>
<TR><TH>Norway</TH>  <TD ALIGN=RIGHT>324,220 </TD><TD ALIGN=RIGHT>307,860</TR>
<TR><TH>Sweden</TH>  <TD ALIGN=RIGHT>449,964 </TD><TD ALIGN=RIGHT>410,928</TR>
</TABLE>
An example of control over presentation style:

Example TABLE-2.html:

<TABLE ALIGN=CENTER WIDTH="80%" BORDER=1 CELLSPACING=10 CELLPADDING=3>
<CAPTION>The Nordic countries</CAPTION>
<TR><TD>Denmark</TD> <TD>Finland </TD> <TD>Iceland </TD>
    <TD>Norway </TD> <TD>Sweden </TD> </TR>
</TABLE>

Notes

See the discussion of tables, which contains additional examples, too.

Tables can be nested. However, nested tables (and large tables in general) can be confusing, and there are implementation deficiencies involved. If you have a large collection of material which might be presented as a structure of nested tables, give some thought to the question whether it is useful (to your readers) that you do so. Often it pays off to present the material first as a compact overview table, then to accompany it with tables containing details about each part.

When there is normal text before or after a table, it is advisable to end the preceding paragraph with an explicit </P> tag and to begin the following paragraph with an explicit <P> tag. Otherwise the browser (e.g. Netscape) may not render the table with suitable empty vertical space around it.

Be careful. If numbers of cells in different rows do not match (taking COLSPAN attributes into account), the result is most probably a total mess.

The default alignments are often unsuitable, especially for numerical tables. Unfortunately there is no way for specifying the default alignment for table cells, except rowwise in the TR element; notice that the ALIGN attribute of a TABLE element specifies the alignment of the entire table and does not affect the default alignments for cells.

Several versions of Netscape do not obey an ALIGN=CENTER attribute in a TABLE element. The common solution is to enclose the entire TABLE element into a CENTER element, but this may cause some problems (see WDG Web Authoring FAQ entry How do I center a table?).



Date of last update: 2010-12-16.
This page belongs to the free information site IT and communication, section Web authoring and surfing, by Jukka "Yucca" Korpela.