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.
<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:
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.
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:
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:
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.
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:
The style sheet (or browser defaults) may provide default minimum widths for each class of block-like elements.
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).
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.