Tables

The HTML table model has been chosen for its simplicity and flexibility. By default the table is automatically sized according to the cell contents and the current window size. The COLSPEC attribute can be used when needed to exert control over column widths, either by setting explicit widths or by specifying relative widths. You can also specify the table width explicitly or as a fraction of the current margins (see WIDTH attribute).

Table start with an optional caption followed one or more rows. Each row is formed by one or more cells, which are differentiated into header and data cells. Cells can be merged across rows and columns, and include attributes assisting rendering to speech and braille, or for exporting table data into databases. The model provides little direct support for control over appearence, for example border styles and margins, as these can be handled via subclassing and associated style sheets.

Tables can contain a wide range of content, such as headers, lists, paragraphs, forms, figures, preformatted text and even nested tables. When the table is flush left or right, subsequent elements will be flowed around the table if there is sufficient room. This behaviour is disabled when the noflow attribute is given or the table align attribute is center (the default), or justify.

Example

<TABLE BORDER>
  <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 would be rendered something like:

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

There are several points to note:

• By default, header cells are centered while data cells are flush left. This can be overriden by the ALIGN attribute for the cell; the COLSPEC attribute for the TABLE element; or the ALIGN attribute on the enclosing row's TR element (from the most specific to the least).
• Cells may be empty.
• Cells spanning rows contribute to the column count on each of the spanned rows, but only appear in the markup once (in the first row spanned).
• If the column count for the table is greater than the number of cells for a given row (after including cells for spanned rows), the missing cells are treated as occurring on the right handside of the table, and rendered as empty cells.
• The row count is determined by the TR elements - any rows implied by cells spanning rows beyond this should be ignored.
• The user agent should be able to recover from a missing <TR> tag prior to the first row as the TH and TC elements can only occur within the TR element.
• It is invalid to have cells overlap, see below for an example. In such cases, the rendering is implementation dependent.

An example of an invalid table:

<table border>
<tr><tdrowspan=2>1<td>2<td>3<td>4<td>5
<tr><td rowspan=2>6
<tr><td colspan=2>7<td>8
</table>

which looks something like:

    /-------------------\
    | 1 | 2 | 3 | 4 | 5 |
    |   |---------------|
    |   | 6 |   |   |   |    The cells labelled 6 and 7 overlap!
    |---|...|-----------|
    | 7 :   | 8 |   |   |
    \-------------------/

Borderless tables are useful for layout purposes as well as their traditional role for tabular data, for instance with fill-out forms:

		       name: [John Smith        ]
		card number: [4619 693523 20851 ]
		    expires: [03] / [97]
		  telephone: [212 873 2739      ]

This can be represented as a table with one row and two columns. The first column is right aligned, while the second is left aligned. This example could be marked up as:

<table>
  <tr valign=baseline>
  <td align=right>
    name:<br>
    card number:<br>
    expires:<br>
    telephone:
  <td align=left>
    <input name="name" size=18><br>
    <input name="cardnum" size=18><br>
    <input name="expires-month" size=2> /
    <input name="expires-year" size=2><br>
    <input name="phone" size=18><br>
</table>

The use of such techniques is one of the motivations for using nested tables, where borderless tables are used to layout cell contents for an enclosing table

Hint: You can achieve a similar effect to the above by using decimal alignment and using the DP attribute to set the alignment character to a convenient character, for example:

<table>
  <tr align=decimal dp=":">
  <td>
    name: <input name="name" size=18><br>
    card number: <input name="cardnum" size=18><br>
    expires: <input name="expires-month" size=2> /
    <input name="expires-year" size=2><br>
    telephone:<input name="phone" size=18><br>
</table>

Each line in the table is then indented so that all the colons are positioned under one another.

Table Sizing Algorithm

The default sizing algorithm requires two passes through the table data. In the first pass, word wrapping is disabled, and the user agent keeps track of the minimum and maximum width of each cell. The maximum width is given by the widest line. As word wrap has been disabled, paragraphs are treated as long lines unless broken by <BR> elements. The minimum width is given by the widest word or image etc. taking into account leading indents and list bullets etc. In other words, if you were to format the cell's content in a window of its own, determine the minimum width you could make the window before things begin to be clipped.

The minimum and maximum cell widths are then used to determine the corresponding minimum and maximum widths for the columns. These in turn, are used to find the minimum and maximum width for the table. Note that cells can contain nested tables, but this doesn't complicate the code significantly. The next step is to assign column widths according to the current window size (more accurately - the width between the left and right margins).

The table borders and intercell margins need to be included in the assignment step. There are three cases:

1. The minimum table width is equal to or wider than the available space. In this case, assign the minimum widths and allow the user to scroll horizontally. For conversion to braille, it will be necessary to replace the cells by references to notes containing their full content. By convention these appear before the table.
2. The maximum table width fits within the available space. In this case, set the columns to their maximum widths.
3. The maximum width of the table is greater than the available space, but the minimum table width is smaller. In this case, find the difference between the available space and the minimum table width, lets call it W. Lets also call D the difference between maximum and minimum width of the table.

   For each column, let d be the the difference between maximum and minimum width of that column. Now set the column's width to the minimum width plus d times W over D. This makes columns with lots of text wider than columns with smaller amounts.

This assignment step is then repeated for nested tables. In this case, the width of the enclosing table's cell plays the role of the current window size in the above description. This process is repeated recursively for all nested tables.

If the COLSPEC attribute specifies the column widths explicitly, the user agent can attempt to use these values. If subsequently, one of the cells overflows its column width, the two pass mechanism may be invoked to redraw the table with more appropriate widths. If the attribute specifies relative widths, then the two pass model is always needed.

The column width assignment algorithm is then modified:

• Explicit widths from the COLSPEC attribute should be used when given, provided they are greater than the minimum column width, otherwise the latter should be used.
• For relative widths, the surplus space W, as defined above, is divided up between the columns appropriately, ensuring that each column is given at least its minimum width. If W is zero or negative, column widths should be increased over the minimum width to meet the relative width requirements.

If the table width is specified with the WIDTH attribute, the user agent attempts to set column widths to match. The WIDTH attribute should be disregarded if this results in columns having less than their minimum widths.

Permitted Attributes

ID

An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Identifiers are NAME tokens and must be unique within the scope of the current document.

LANG

This is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation of English spoken in the United Kingdom. It can be used by parsers to select language specific choices for quotation marks, ligatures and hypenation rules etc. The language attribute is composed from the two letter language code from ISO 639, optionally followed by a period and a two letter country code from ISO 3166.

CLASS

This a space separated list of SGML NAME tokens and is used to subclass tag names. By convention, the class names are interpreted hierarchically, with the most general class on the left and the most specific on the right, where classes are separated by a period. The CLASS attribute is most commonly used to attach a different style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. The conventions for choosing class names are outside the scope of this specification.

CLEAR

When there is a figure or another table in the margin, you sometimes want to start another table below the figure rather than alongside it. The CLEAR attribute allows you to move down unconditionally:

clear=left

move down until left margin is clear

clear=right

move down until right margin is clear

clear=all

move down until both margins are clear

Alternatively, you can decide to place the table alongside the figure just so long as there is enough room. The minimum width needed is specified as:

clear="40 en"

move down until there is at least 40 en units free

clear="100 pixels"

move down until there is at least 100 pixels free

The style sheet (or browser defaults) may provide default minimum widths for each class of block-like elements.

NOFLOW

The presence of this attribute disables text flow around the table. It avoids the need to use the CLEAR or NEEDS attributes on the following element.

ALIGN

Specifies horizontal alignment of the table (not its contents):

BLEEDLEFT

Flush left with the left (window) border.

LEFT

Flush left with the left text margin.

CENTER

The table is centered between the text margins and text flow around the table is disabled. This is the default setting for ALIGN.

RIGHT

Flush right with the right text margin.

BLEEDRIGHT

Flush right with the right (window) border

JUSTIFY

When applicable the table should be sized to fill the space between the left and right text margins. Text flow around the table is disabled for align=justify.

UNITS

Specifies the choice of units for the COLSPEC attribute:

units=en

Specifies en units (a typographical unit equalt to half the point size). This is the default setting and allows user agents to render the table a row at a time without waiting until all of the table's data has been received.

units=relative

Used to set the relative width of columns. The user agent sums the values to determine the proportional width of each column.

units=pixels

The least useful!

A design issue for user agents is how to handle cases where cell contents won't fit into the specified column widths. One approach is to clip the contents to the given column width, another is to resize the columns to fit the contents regardless of the COLSPEC attribute (its best to wait until all of the table's data has been processed before resizing).

COLSPEC

The colspec attribute is a list of column widths and alignment specifications. The columns are listed from left to right with a capital letter followed by a number, e.g. COLSPEC="L20 C8 L40". The letter is L for left, C for center, R for right alignment of cell contents. J is for justification, when feasible, otherwise this is treated in the same way as L for left alignment. D is for decimal alignment, see DP attribute.

Capital letters are required to avoid a particularly common error when a lower case L is confused with a one. Column entries are delimited by one or more space characters.

The number specifies the width in en's, pixels or as a fractional value of the table width, as according to the associated units attribute. This approach is more compact than used with most SGML table models and chosen to simplify hand entry. The width attribute allows you to specify the width of the table in pixels, em units or as a percentage of the space between the current left and right margins.

DP

This specifies the character to be used for the decimal point with the COLSPEC attribute, e.g. dp="." (the default) or dp=",". The default may be altered by the language context, as set by the LANG attribute on enclosing elements.

WIDTH

This specifies the width of the table according to the UNITS attribute. If units=relative, the width is taken as a percentage of the width between the current left and right margins. The user agent should disregard this attribute if it would result in columns having less than their minimum widths.

BORDER

This presence of this attribute instructs the user agent to render borders around tables. For instance: <TABLE BORDER>. The precise appearence, along with the size of margins around cells, can be controlled by associated style sheets, or via information in the STYLE element in the document head. Subclassing tables, rows and cells is particularly useful in this regard.

NOWRAP

The NOWRAP attribute is used when you don't want the browser to automatically wrap lines. You can then explicitly specify line breaks in paragrphs using the BR element.