TABLE Element

The TABLE element is used to define displays of data in rows and columns. Some HTML developers also use nested tables to lay out information on a Web page. This latter use of tables may become less necessary as HTML 4 browsers become available which recognize style sheets.

The TABLE element was first used as an extension of HTML for Netscape Navigator browsers. Formally specified in 1996 in HTML 3.2, the features of tables were extended in the HTML 4.0 draft specifications in 1997. This document summarizes the HTML 4.0 capabilities for tables.

Table Elements

To make a table, you use several related elements, all contained within the TABLE element. Here is a quick list of the related elements that are typically used together to create a table:

A TABLE element to contain the elements that make up the table.
An optional CAPTION element to label the table with a name or explanation.
One or more groups of rows. Each group of rows consists of an optional pair of THEAD and TFOOT elements and a TBODY element containing at least one TR (table row) elements.
One or more groups of columns defined by COLGROUP or COL elements which immediately follow the (optional) CAPTION element at the start of the table.
Cells consisting of either TH (table header) elements describing nature of data in cells in row or column or TD (table data) elements to contain data.

Table Examples

Here's a quick example of a very simple table:

<TABLE Border="1">
   <CAPTION>August Standings</CAPTION>
   <TR><TH Rowspan="2"></TH><TH Colspan="2">Totals</TH></TR>
   <TR><TH>Wins</TH><TH>Losses</TH></TR>
   <TR><TH Align="left">White Sox</TH><TD>22</TD><TD>55</TD></TR>
   <TR><TH Align="left">Tigers</TH><TD>84</TD><TD>8</TD></TR>
</TABLE>

This table is rendered in your current browser as:

August Standings
	Totals
	Wins	Losses
White Sox	22	55
Tigers	84	8

This would be rendered, in a Level 3 browser, something like this:

        August Standings
+-------------------------------+
|           |      Totals       |
|           |-------------------|
|           |  Wins   |  Losses |
|-----------+---------+---------|
| White Sox |   22    |    55   |
|-----------+---------+---------|
| Tigers    |   84    |     8   |
+-------------------------------+

A more elaborate example table shows other options available.

Details of Table-related Elements

The TABLE element has these attributes:

Align: the horizontal alignment of the table on the screen (not the contents of the table). Possible values are:
- left: at the left text margin
- center: centered between text margins
- right: at the right text margin
BGcolor: the background color for the cells of the table.
Border: causes browser to render a border around the table; if missing, the table has no grid around it or its data.
Cellspacing: space around data cells, in pixels.
Cellpadding: space around data in the cells, in pixels.
Cols: specifies the number of columns in the table. This is a hint for the Web browser to render the table incrementally as it receives data, because the browser "knows" how many columns there are.
Frame: defines which parts of table frame to display. Frame=void|above|below|hsides|lhs|rhs|vsides|box|border
- void: No sides. This is the default value.
- above: The top side only.
- below: The bottom side only.
- hsides: The top and bottom sides only.
- vsides: The right and left sides only.
- lhs: The left-hand side only.
- rhs: The right-hand side only.
- box: All four sides.
- border: All four sides.
Rules: defines where to draw the rules in the table interior. Rules="(none | groups | rows | cols | all)".
Width: specifies how wide the table will be; if given as "NN%", the width is NN% of the width of the display.
The following attributes have been identified in RFC1924 and are not yet by supported by many browsers.
Id: a document-wide identifier for naming positions in the document as distinations for a hypertext link.
Class: A list of names that may be used by style sheets.
Lang: the natural (human) language used by the content of the table.
Title: an annotation of the TABLE element. This annotation may appear, for example, as a pop up window in some browsers when the user passes their mouse over the table.
Dir: identifies the layout of rows--such as column 1 is on the right (Dir="rtl") or left (Dir="ltr"). Used for languages that have different directionality in reading (not left to right, top to bottom).

Elements Used with TABLE

Contained within a TABLE element, you may put these elements:

CAPTION: used to label a figure or table
Attributes:
- Align: position of the caption relative to figure or table; values include "top" or "bottom"
TH: identifies a table header cell; and TD: identifies a table data cell;
Both have Attributes:
- Align: horizontal alignment of the paragraphs in a table row; values include "left," "center," "right," "justify," and "decimal" (text aligned on decimal points).
- Axes: a comma-separated list of axis names which correspond to the row and columns that pertain to this cell.
- Axis: defines an abbreviated name for a header cell; by default, the default name is its content.
- BGColor: the background color for the cell.
- Char="c": specifies the alignment character for use with Align="char";
- Charoff="n": the offset of the alignment character on each line.
- Valign: vertical alignment of material in a cell. Values include "top," "middle," "bottom," "baseline."
- Colspan: the number of columns the cell spans.
- Rowspan: the number of rows the cell spans.
- Nowrap: prevents the browser from wrapping the contents of the cell. (depreciated)
TR: identifies a container for a row of table cells; Attributes:
- BGcolor: background color for row.
COLGROUP: a container for a group of elements; allows you to set default properties for these groups of columns. Attributes:
- Id, Class, Lang, and Dir: same as for TABLE;
- Span="n"; the default for how many columns in this group;
- Width="n": default width for each of the grouped columns.
- Align, Char, Charoff, and VAlign: values for horizontal and vertical alignment within table cells.
COL: identifies a column; Attributes:
- Span="n": number of columns spanned;
- Width="n": width of column
TABLE Tips:
- Table data can be lists, images, Forms, and other elements.
- TH element is typically rendered as bold text.
- TD element is typically rendered as regular weight text.
- Always use TR's as "holders" for TH's and TD's.
- The browser sets the number of columns in a table to be the greatest number of columns in all the row. Blank cells are used to fill any extra columns in the rows.
- Look at an example to learn more.

References

HTML Tables, by D. Raggett.