Some more features

The next few sections introduce some more features of the html table model, leaving the advanced features to later on.

Table Captions

The CAPTION element can be used to define a table caption, and if present, must occur immediately following the TABLE start tag. You can specify the position of the caption relative to the table with the ALIGN attribute, e.g.

           <CAPTION ALIGN=BOTTOM>the table caption</CAPTION>

The ALIGN attribute can take the values: TOP, BOTTOM, LEFT or RIGHT. The attribute value is case insensitive. Note that the end tag is optional.

Head, Body and Foot table sections

The THEAD, TBODY and TFOOT elements can be used to group table rows into corresponding head, body and foot sections. This gives user agents a better handle on rendering long tables, e.g. if the table has a large number of rows in the body section, the user agent could use a scrolling region to render the table compactly. When rendering to a paged output device tables will often have to be broken across page boundaries. The thead, tbody and tfoot elements allow the user agent to repeat the table foot at the bottom of the current page and the table head at the top of the new page before continuing on, where left off, with the body section.

Another motivation for using thead, tbody and tfoot elements is the ability they give authors to more easily control the border style and the horizontal and vertical alignment of cell contents.

<TABLE BORDER=FEW>
  <CAPTION>A test table with merged cells</CAPTION>
  <THEAD>
    <TR><TH ROWSPAN=2><TH COLSPAN=2>Average
        <TH ROWSPAN=2>other<BR>category<TH>Misc
  <TBODY>
    <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>

Note: the end tags for THEAD, TBODY and TFOOT can always be omitted, but if you have a THEAD, then you will need to include a TBODY start tag too. Otherwise, the parser won't be able to distinguish body rows from head rows.

Border Styles

border=none

suppress borders - useful with graphics etc.

border=frame

outer border around table only

border=basic

horizontal border between THEAD and TBODY, and between TBODY and TFOOT

border=rows

like border=basic with an outer border, plus horizontal borders between rows

border=cols

like border=basic with an outer border, plus vertical borders between columns

border=all

borders around all cells, including an outer border

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 border=none>
  <tr>
  <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

Table Layout Options

Normally, tables are rendered in a two stage process. The first stage determines suitable column widths based on cell content, while the second stage actually renders the table using these widths. For large tables or slow network connections, you can give the user agent a chance to start displaying the table incrementally as the data arrives from the network. To do this use the COLS attribute on the TABLE element to specify the number of columns, e.g. <table border=all cols=5>.

For the incremental display mode, the default table width is the current window size (the space between the left and right margins). You can set the table width relative to this default using the WIDTH attribute e.g. width="50%". By default, With the incremental display mode all columns have the same width. Note that the WIDTH attribute takes the form of a positive integer followed by a percent sign.

You can specify the relative widths of some or all of the columns using the COLW element, e.g. <colw col=3 width=2.5>. This example specifies a relative width of two and a half for column 3. The default relative width is 1.0. Note that the incremental mode may result in columns that are too small in some cases. The user agent can then choose to redraw the table with more appropriate column widths once all of the table data has been received.

Both the COL and the WIDTH attributes are required for the COLW element. The WIDTH attribute takes the form of a positive number and may include a decimal point for floating point values. The COL attribute is a positive integer value. COL=1 denotes the first column, with COL=2 for the second column and so on, where columns are numbered from left to right. Simple column ranges are also permitted, e.g. COL=3-7 which matches columns 3, 4, 5, 6 and 7. The range is limited to the form lower-upper, when both values are positive integer values separated by a hyphen, and upper should be greater than lower.

An example for an incremental mode table with 4 columns:

<table borders=all cols=4 width="80%">
  <colw col=1 width=4>
  <colw col=2 width=1.5>
  <colw col=3 width=1.5>
  <colw col=4 width=3>
  <tr> -- table data follows --
</table>

You can also specify relative widths for the auto layout mode. The same goes for the table width attribute. The sizing algorithm does its best to meet your suggestions, but ensures that all the columns are large enough for the cell contents. Further details on the algorithm are given in a later section.