TABLEs in HTML
==============

If there is such a thing as a "simple" specification for tables,
it is that given in W3C HTML3.2, and described below.


A minimal skeletal table structure is shown below for an example of
three rows of three columns:

  <TABLE>
    <TR>
      <TD>Top-Left</td> <TD>Top-Centre</td> <TD>Top-Right</td>
    </tr>
    <TR>
      <TD>Mid-Left</td> <TD>Mid-Centre</td> <TD>Mid-Right</td>
    </tr>
    <TR>
      <TD>Bot-Left</td> <TD>Bot-Centre</td> <TD>Bot-Right</td>
    </tr>
  </TABLE>

Note the significance of <TR> ("Table Row") to start each row,
and <TD> ("Table Data") to introduce each cell on that row.

The closing tags </TR> and </TD> are NOT required by any of the
IETF/W3C specifications, but browsers such as Netscrap tend to fall over
if they are not present.
The closing tag </TABLE> is obligatory.

Other tags available are:

  <CAPTION> . . . </CAPTION>
    which goes immediately after the <TABLE> tag
    (note the obligatory end-tag);

  <TH>
    (for Table Header)
    which is intended to be used to title individual columns,
    but can actually go wherever a <TD> could go.



All these tags can have various attributes:

<TABLE> can have:

  ALIGN=
    with values LEFT, CENTER or RIGHT to place the table on the page;

  BORDER=
    with a line-width in pixels for drawing an outer border:
    a value of 0 implies no border;
    putting just BORDER (with no value) leaves it to the browser
    to draw a border which should be 1 pixel wide;
    omitting BORDER leaves it to the browser, which should suppress it;

  CELLSPACING=
    allows a gap between adjacent cells (given in pixels);

  CELLPADDING=
    allows a margin between the cell content and its borders;

  WIDTH=
    can be used to declare the overall width of the whole table,
    either in pixels, or as a percentage of the page width:
    USE WITH CAUTION!


<CAPTION> can in principle have one attribute

  ALIGN=
    with the values TOP or BOTTOM:
    the value BOTTOM is supposed to place the caption underneath
    the table, even if the <CAPTION> tag occurs earlier than that,
    but it is unwise to rely upon this always working!


<TR> can have:

  ALIGN=
    with the values LEFT, CENTER or RIGHT,
    for horizontal positioning of the contents of a cell;

  VALIGN=
    with the values TOP, MIDDLE or BOTTOM,
    for vertical positioning of the contents of a cell.


<TH> and <TD> can have:

  ALIGN=
    with the values LEFT, CENTER or RIGHT,
    for horizontal positioning of the contents of a cell:
    if this is omitted, the alignment given in <TR> is used;
    if it is omitted in both <TR> and the cell tag, the default is:
      <TH> contents are centre-justified,
      <TD> contents are left-justified;

  VALIGN=
    with the values TOP, MIDDLE or BOTTOM,
    for vertical positioning of the contents of a cell:
    if this is omitted, the alignment given in <TR> is used;

  COLSPAN=
    allows a cell to span more than one column;

  ROWSPAN=
    allows a cell to span more than one row;
    USE WITH CAUTION!

  WIDTH=
    allows a width (in pixels) to be given for the contents of the cell
    (excluding the CELLPADDING and CELLSPACING):
    USE WITH CAUTION!

  HEIGHT=
    similarly sets the height in pixels of the contents of the cell;

  NOWRAP
    (without a value)
    disables line-breaks in the textual content of a cell:
    USE WITH CAUTION!


Please note that it is all to easy to get into an impossible mess if
incompatible dimensions are given:  for example cell widths which
add up to more than the table width (and don't forget, table width
includes cellspacings, cellpaddings, and border widths too).

In the absence of WIDTH attributes, the browser will/should work it out
for itself:  this usually works successfully, although using NOWRAP
on long lines of text could pose problems.



The obvious use for TABLEs is to present tabular data, in which case
the contents of each cell will be textual;
but it is also widely (mis)used as a means of controlling the horizontal
layout of (for example) images (in which case the border is "turned off").

In fact, a cell can contain almost anything.
It is even permissible to have nested tables, ie any one cell can contain
another full table:  this requires even greater care!



HTML4.0 introduces some additional tags and attributes which, depending
on how you look at it, increase either the flexibility or complexity!

It is definitely worth trying to see if the table you want can be done
in the above simple way FIRST;  and only contemplating using HTML4.0 tags
if it can't be done in HTML3.2.


                                      John Alldred <john@protovale.co.uk>
                                                        15th August 1998
                                         http://www.protovale.co.uk/john/