About Tables in HTML...
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

Justification for HTML Tables

Before the creation of the HTML Table model, the only method available for relative alignment of text or objects was through the use of the PRE tag. While this was useful in some situations, the effects of PRE are very limited, and some other solution was definitely necessary to resolve this need.

Current desktop publishing packages provide a high degree of control over table rendering using other document formats. Unfortunately, it would be impractical to reproduce this in HTML given the otherwise simplistic nature of the language, without making HTML into a bulky rich text format [like RTF or MIF.]

Given this requirement, the Table model that has been developed is still definitely THE most complex formatting structure in HTML. It supports rendering to braille or speech, as well as exchange of tabular data with databases and spreadsheets. The model is also designed to work well with style sheets, but does not require them.

History of HTML Tables

The HTML table model has evolved from studies of existing SGML tables models, the treatment of tables in common word processing packages, and looking at a wide range of tabular layout in magazines, books and other paper-based documents.

After HTML 2.0 (RFC 1866) was forwarded as a proposed standard, work had already begun on extending the capabilities of HTML. The result of this was HTML +.

Beginning in July 1993 after the WWW workshop and many subsequent discussions on the www-talk mailing list, many ideas for the future direction of HTML crystallized. A draft document created by David Raggett of the W3 was released in Oct./Nov. 1993 detailing the features of HTML +. One of the most important features of HTML + was its Table model which allowed tabular representation of data WITHOUT the use of PRE.

HTML + later developed (after much refinement) into the draft for HTML 3.0. The 3.0 draft sported Tables capability like its HTML + predecessor, but improved on its features. Many browsers have since implemented this 3.0 Table model.

Since creating this HTML 3 Table model, much more refinement has occurred. The current full Tables specification has risen from the ashes of the expired HTML 3 draft to give the author a simple (intentionally), intuitive model that is sufficient for most authoring purposes. This makes it practical to create the HTML codes for tables with simple text editors and reduces the learning curve when getting started. These factors have been critical to the success of HTML to date.

Tables in a Nutshell

The concept of Tables in HTML involves content that is contained in individual cell structures. These cells can contain other HTML structures such as headers, lists, paragraphs, forms, figures, preformatted text and even nested tables.

The TABLE model is a Block Formatting structure [like lists and headings] rather than a character-level element. This means it will react in a similar manner to other Block Formatting elements.

The top level Table container tag [TABLE] controls global properties for the table structure itself, while the various other tags and attributes for tables organize and format the contained cell content into row and column structures. Table capabilities such as horizontal alignment for example, are allowed in most Table tags, from the cell level [TH, TD] to the highest grouping elements [COLGROUP, THEAD, TBODY, TFOOT, TR.] This allows for more efficient specification of global properties. Properties for an individual cell defined in grouping structure tags are overridden by those for specified for the current cell, but alignment properties on elements within cells take precedence over all of these.

NOTE: There is a slight conflict between the newer Complex Table Model and a popular extension to the Simple Table Model made by Netscape. Netscape allows widths of columns to be specified in table cell tags [TH and TD] while the Complex model controls width through the COL tag. The current official specification recommends that browsers provide support for this popular extension for backward compatibility, even though it is not part of the spec. It further recommends authors use the COL method element in practice.

Simple Table Model

Tags Used by the Simple Table Model: [TABLE, CAPTION, TR, TH, TD]

This is the Table Model that most browsers currently support. The model is from the HTML + and HTML 3.0 Draft specifications which describes tables in terms of table cells grouped into row-based [TR] cell layouts. The row structures are the only grouping mechanism for the Simple Table Model. More complex structures are possible via the Complex Model.

Table cells are further distinguished into header [TH] and data [TD] cells. This distinction allows browsers to render header and data cells distinctly, even in the absence of style sheets. Cells can also span or merge across multiple rows and columns, and 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.) The row count is determined by the number of TR elements. Any rows implied by cells spanning rows beyond this should be ignored.

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 hand side of the table and rendered as empty cells (or on the left side if the current language direction indicates it.)

As can be guessed, it is also possible to create tables with overlapping cells. In these cases, the rendering of the table in the browser is implementation dependent.

Complex Table Model

Tags Used by the Complex Table Model: [TABLE, COLGROUP, COL, CAPTION, THEAD, TBODY, TFOOT, TR, TH, TD]

The Complex model incorporates all the elements of Simple tables in addition to many new elements that give the author even more final display control. The Complex model inherits certain aspects of the CALS Table Model, such as the ability to group Table Rows into THEAD, TBODY and TFOOT sections, plus the ability to specify cell alignment compactly for sets of cells according to the context. The Complex Model is also fully backward - compatible with the Simple Model. This allows simple tables to be expressed simply with extra complexity only when needed.

The Complex Table Model offers several rendering advantages over the Simple Model:

Incremental Display

For large tables or slow network connections, it is desirable to be able to start displaying the table before all of the data has been received. To achieve this, the table must explicitly state the number of columns contained before any of the table content is received [COLS attribute.] Using the COLGROUP and COL tags the author can also specify relative or absolute sizes for each column of the table (all cells in a column have the same width.)

Scrolling and Non-Scrolling Table Regions

When rendering to a paged device (i.e. a printer), tables will often have to be broken across page boundaries. Grouping Table Rows [TR] in to Header [THEAD], Body [TBODY] and Footer [TFOOT] elements allows the browser to repeat the table foot at the bottom of the current page, and then the table head at the top of the new page before continuing on with the Table Body. Also, If the table has a large number of rows in the TBODY, a browser may choose to use a scrolling region for its display of the Table Body sections while keeping the Header and Footer sections in a static position.

THEAD and TFOOT are placed before the TBODY in the markup sequence, so that browsers can render the header and footer before receiving all of the Table Body data. Each THEAD, TFOOT and TBODY element must contain one or more TR elements.

Complex Internal and External Border Control Rendering

The Simple Table model only offers one universal control mechanism for specifying borders in a table. An author can specify a border (or none at all) that applies around all cells in the table. The Complex model, on the other hand, offers authors the ability to choose from a set of commonly used classes of border styles to independently control the outer table border [FRAME attribute] and inner table cell borders [RULES attribute.]

Currently, only Internet Explorer has implemented most of the current W3 Tables specification [Complex Model] in its 3.0 version, but support for this model should grow quickly. There are several important attributes that are NOT supported in IE3:

AXIS, AXES:

Used in TH/TD
These attributes would provide a means for defining concise labels for cells, which can help when rendering to speech, or processing table data for a database.

ALIGN/VALIGN:

Used in COL/COLGROUP/THEAD/TBODY/TFOOT
This would allow specification of the alignment attributes on global tags.

WIDTH:

Used in COLGROUP
Controls individual column widths. This is currently allowed in the COL tag but not for COLGROUP.

CHAR, CHAROFF:

Used by COL/COLGROUP/TH/TD/TR/THEAD/TBODY/TFOOT
This would allow more refined horizontal alignment control. Alignment would revolve around a specified character using CHAR while CHAROFF would establish a horizontal distance offset from an established alignment axis.

Official References

http://www.w3.org/pub/WWW/TR/WD-tables.html

W3 Consortium HTML 3 Tables draft.

http://www.ics.uci.edu/pub/ietf/html/rfc1942.txt

RFC 1942 is basically an official later version of the W3 Table Draft link.

http://home.netscape.com/assist/net_sites/tables.html

Netscape Simple Table Model implementation description detailing extra extensions to the model.

http://www.microsoft.com/workshop/author/newhtml/htmlr020.htm

Internet Explorer 3.0 Tag reference (covers all tags in the Complex Table Model.)

Tutorials

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Tables/tutorial.html

NCSA Mosaic's Table tutorial.

http://home.netscape.com/assist/net_sites/table_sample.html

Netscape's Simple Table Model tutorial.

http://www.microsoft.com/workshop/author/newhtml/htmlr010.htm

Internet Explorer 3.0 Tutorial explaining the Complex Table Model and IE extensions.

http://www.charm.net/~lejeune/tables.html

A simple Table Model tutorial with many examples to follow along with.

http://home.netscape.com/assist/net_sites/table_sample.html

Netscape's Table Sampler: side by side code samples with results

Other Related Links

http://web.canlink.com/webdesign/table.html

Overview of Simple Table model and Netscape Extensions.

http://www.crc.ricoh.com/~marcush/tables.html

Covers details of common problems with backward compatibility of content in Tables.

http://www.missouri.edu/~wwwtools/tablemaker

Table Maker - Create a Simple Table Model table by filling out a form.