HTML 3.2 and Netscape 3.0: The TABLE Element
The TABLE Element
HTML 3.2 and Netscape 3.0
- The CAPTION element
- The ALIGN attribute
- The WIDTH attribute
- The BORDER attribute
- CELLPADDING/SPACING attributes
- The BGCOLOR Attribute (NHTML 3.0)
- Table rows
- Table cells
- Recent Changes
The TABLE element defines a container for a table definition. A table consists of an optional CAPTION, followed by rows (<TR>...</TR>) containing data or header cells (TH/TD). TABLEs can be aligned left, right, or center. Text wraps around tables with ALIGN=LEFT and RIGHT. A simple table looks like this:
HTML 3.2 uses the "widely deployed subset of the full table standard," as defined in the May 1996 Request For Comments number 1942 (RFC 1942 (http://www.ics.uci.edu/pub/ietf/html/rfc1942.txt). The HTML 3.2 DTD defines a stripped down version of this rfc, which closely matches Netscape's implementation of tables in May 1996. Highlights include compatibility with the latest Netscape and Microsoft browsers' WIDTH, BORDER, ALIGN, VALIGN, and CELLPADDING/SPACING attributes.
Netscape 3.0's version of tables [NC 95d] is now nearly identical to the HTML 3.2 DTD. Netscape 3.0 adds the BGCOLOR attribute to table cells, which allows the background color of individual cells to be set.
Here is a short description of how tables work from rfc1942 of May 1996.Tables start with an optional caption followed by 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 limited support for control over appearence, for example horizontal and vertical alignment of cell contents, border styles and cell margins. You can further affect this by grouping rows and columns together. Tables can contain a wide range of content, such as headers, lists, paragraphs, forms, figures, preformatted text and even nested tables.
Note: The TH and TD elements can contain body.content, (headers, lists, etc.) while other elements such as captions can only contain text-type content (characters, character emphasis elements, IMG and anchors).
The CAPTION element
The CAPTION element contains the table's caption or title. It is normally used to label tables or figures. HTML 3.2 allows any text-type element for CAPTIONs, while Netscape 3.0 allows any body tags (like H2). It should immediately follow the TABLE element. The ALIGN attribute can be set to TOP (the default) and BOTTOM. It is always centered horizontally in relation to the table width. Ex:
<CAPTION><H2>Tables with an H2, a no no</H2> - WRONG
<CAPTION ALIGN=BOTTOM>Table with a correct caption, placed under the table, defaults to center</CAPTION> - RIGHT
ALIGNment of TABLEs
The alignment of cell contents can be specified on a cell by cell basis, or inherited from enclosing elements, such as the row, column or the table element itself.
The ALIGN attribute
The ALIGN attribute in the HTML 3.2 draft can be left, center, or right. The default is center. Text can flow around a table (similar to the FIG tag) when left or right aligned.
NHTML 3.0 and HTML 3.2 differ in how they center a table. NHTML uses a tag, while HTML 3.2 properly uses an attribute to the TABLE tag. There are now two ways to center a table in NHTML 3.0: by using the <CENTER> tag or the ALIGN=CENTER attribute to the new HTML 3.0 <DIV> tag. The HTML 3.2 way is to use the ALIGN=CENTER attribute of the TABLE tag. (Note: Netscape 3.0 does not support the ALIGN=CENTER attribute of the TABLE tag).
Since HTML 3.2 ignores tags it does not recognize you can do both:
<TD>Centers in Netscape</TD>
</CENTER> - DISCOURAGED, but now legal in HTML 3.2
<TD>Hey, this really works.</TD>
<TD>Data, Data, where are you Data?</TD>
</CENTER> - RIGHT (works for Netscape 1.1 and HTML 3.2)
<TD>da, da, da, dooo</TD>
<TD>Data, ohhh DATA</TD>
</DIV> - RIGHT (works for Netscape 2.0 and HTML 3.2)*
<TD>HTML 3.2-only way</TD>
</TABLE> - RIGHT (works for HTML 3.2-compliant browsers only, Netscape 4.0?)
*Recommended until Netscape supports TABLE ALIGN=CENTER. You could remove the <DIV&DIV&DIV&&DIV&&&> tags once this occurs.
Inheritance OrderAlignment properties can be included with most of the table elements: TR, TH and TD. When rendering cells, horizontal alignment is determined by columns in preference to rows, while for vertical alignment, the rows are more important than the columns.
The WIDTH attribute
The WIDTH attribute sets the desired relative width of the table as a percentage of the screen width between margins. The WIDTH attribute (percentage) is now compatible with Netscape (for the TABLE tag). The default width of a table is 100% of the available page. Note that NHTML allows an absolute width (i.e., <TABLE WIDTH=465> in pixels) which is not supported in the HTML 3.2 DTD.
<TABLE WIDTH=400> or WIDTH=75% - WRONG
<TABLE WIDTH="75%"> - RIGHT
The WIDTH attribute had been dropped from the TH and TD tags in the latest (October) Table draft, but is now back in the HTML 3.2 specification. The suggested width in pixels can be used for TH/TD cells. Netscape allows a relative width (i.e., <TD WIDTH=50%>) which is not included in the HTML 3.2 DTD.
The BORDER attribute
The BORDER attribute is now compatible with Netscape and Explorer. The BORDER attribute can be used alone as a value (i.e., <TABLE BORDER>) or as an attribute (i.e., <TABLE BORDER=2>) which specifies the width of the border drawn around the frame. The default is no border.
CELLPADDING and CELLSPACING attributes
These two Netscapisms have now become part of the HTML 3.2 specification, deploy it and they will come. The CELLPADDING controls the spacing within cells, while CELLSPACING controls the spacing between cells. All units are in absolute pixels.
Usage<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=5> - RIGHT
<TABLE BORDER=1 FRAME=hsides RULES=cols CELLPADDING=5 CELLSPACING=5> - HTML 3.0 (expired)
The BGCOLOR Attribute
|Netscape 3.0 and Internet Explorer 3.0 now support table cell background colors. HTML 3.2 does not include this new feature. You can specify the color of individual cells, rows, headers, and entire tables using the BGCOLOR attribute and the TD, TR, TH, and TABLE tags. The color values are specified identically to the BODY BGCOLOR attribute, i.e., BGCOLOR="#ff0000" = red. Nested tables inherit background table colors. Note that Netscape's own release notes have an error, VALIGN=BOTTOM in the CAPTION should read ALIGN=BOTTOM.|
</TABLE> - NHTML 3.0
<TABLE ALIGN=RIGHT BORDER=1 WIDTH="20%">
<CAPTION CENTER ALIGN=BOTTOM>Color Cells</CAPTION>
<TD>Same darned Color</TD>
</TABLE> - RIGHT
The TR element is a container for a table row. The number of rows in a table is defined by the number of TR tags. The closing </TR> tag is optional, but recommended. The TR tag is identical in both NHTML and HTML 3.2. TR attributes are ALIGN and VALIGN. Using <TR ALIGN=CENTER> is a quick way to center every cell in a row.
The TD tag is a container for a table data cell. Not all rows must have the same number of data cells, the total number of columns in a table will be the number of data cells and COLSPANS in the longest row. The TD and TH tags behave similarly in both HTMLs. The TD and TH tags can contain any body content (see the note above). The HTML 3.2 TD/TH attributes are NOWRAP, ROWSPAN, COLSPAN, ALIGN, VALIGN, WIDTH (pixels), and HEIGHT (pixels).
- NOWRAP (suppress word wrap)
- ROWSPAN=num (number of rows spanned by cell, ex: TD ROWSPAN=3)
- COLSPAN=num (number of cols spanned by cell, ex: TD COLSPAN=2)
- ALIGN (horizontal alignment in cells, ex: TD ALIGN=RIGHT)
- VALIGN (vertical alignment in cells ex: TR VALIGN=TOP)
- WIDTH=50 (suggested cell width in pixels, ex: TD WIDTH=50)
- HEIGHT=30 (suggested cell height in pixels, ex: TD HEIGHT=30)
By default, cell contents are vertically aligned at the middle of each cell. The VALIGN attribute works the same in both HTMLs and can override this default. It can have one of three values: TOP, MIDDLE, BOTTOM or BASELINE.
Both HTMLs support left, center and right values for the ALIGN attribute.
Both HTMLs support the COLSPAN and ROWSPAN attributes. Note that the closing </TD></TH></TR> tags are optional in HTML 3.0, but should be included as some browsers require them in order to render tables properly (as I discovered with Netscape 1.1 although Netscape 2.0 works).
<TD WIDTH="50%" NOWRAP>some data</TD> - NHTML
<TD COLSPAN=2 ALIGN=RIGHT VALIGN=TOP WIDTH=50>some data</TD> - RIGHT
|The Bounty||Mutiny on the High Seas||Rowspan=2 ALIGN=CENTER VALIGN=CENTER|
|Starring...||Captain Queeg||And a cast of thousands...|
Some corrections and clarifications to this document were made recently, based on e-mail from kind souls that took the time to write in and the author's own validation experience.
- 11-17-96 - CELLPADDING and SPACING were reversed, corrected
- Thanks to Gregg (firstname.lastname@example.org) for pointing this out. CELLPADDING sets the spacing within the cell, not between cells as CELLSPACING does.
- Updated for HTML 3.2 and Netscape 3.0
- The entire table section was updated to reflect the new HTML 3.2 spec. and Netscape 3.0's features. The SECTION and COL areas were removed, not in HTML 3.2 draft. (8-29-96)
- The BGCOLOR attribute was added
- Netscape 3.0 (NHTML)
- The WIDTH attribute
- Should be used with quotes around the figure desired. Example: <TABLE WIDTH=75%> - WRONG -> <TABLE WIDTH="75%"> - RIGHT.
- Content of tables
- Table cells (TD and TH) can contain any body text like headers, lists, even other tables while other table elements (like the CAPTION) can contain only text content. See the note above for more details.
Comments are welcome
Revised: Jan. 31, 1997