HTML 3.2 and Netscape 3.0: The TABLE Element | WebReference

HTML 3.2 and Netscape 3.0: The TABLE Element

The TABLE Element

HTML 3.2 and Netscape 3.0

Contents

Introduction

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:

DateDesc.Cost
12-15-96Hoodwink5.95
12-16-96Bushwack7.50
ALIGN=CENTER>

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 (https://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:

Usage

<TABLE>
<CAPTION><H2>Tables with an H2, a no no</H2> - WRONG

<TABLE>
<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:

Usage

<CENTER>
<TABLE>
  <TR>
    <TD>Centers in Netscape</TD>
    <TD>Datagram</TD>
  </TR>
</TABLE>
</CENTER> - DISCOURAGED, but now legal in HTML 3.2

<CENTER>
<TABLE ALIGN=CENTER>
  <TR>
    <TD>Hey, this really works.</TD>
    <TD>Data, Data, where are you Data?</TD>
  </TR>
</TABLE>
</CENTER> - RIGHT (works for Netscape 1.1 and HTML 3.2)

or

<DIV ALIGN=CENTER>
<TABLE ALIGN=CENTER>
  <TR>
    <TD>da, da, da, dooo</TD>
    <TD>Data, ohhh DATA</TD>
  </TR>
</TABLE>
</DIV> - RIGHT (works for Netscape 2.0 and HTML 3.2)*

or

<TABLE ALIGN=CENTER>
  <TR>
    <TD>HTML 3.2-only way</TD>
    <TD>Early 1997?</TD>
  </TR>
</TABLE> - RIGHT (works for HTML 3.2-compliant browsers only, Netscape 4.0?)

*Recommended until Netscape supports TABLE ALIGN=CENTER. You could remove the &ltDIV&DIV&DIV&&DIV&&&> tags once this occurs.

Inheritance Order

Alignment 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.

Usage

<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.

Usage

Colored Table Cells
Green
Red
<TABLE ALIGN=RIGHT BORDER=1 WIDTH=20%>
<CAPTION>Color Cells</CAPTION>
  <TR>
    <TD BGCOLOR="#bbffee">Green</TD>
  </TR>
  <TR>
    <TD BGCOLOR="#ffbbcc">Red</TD>
  </TR>
</TABLE> - NHTML 3.0

<TABLE ALIGN=RIGHT BORDER=1 WIDTH="20%">
<CAPTION CENTER ALIGN=BOTTOM>Color Cells</CAPTION>
  <TR>
    <TD>One Color</TD>
  </TR>
  <TR>
    <TD>Same darned Color</TD>
  </TR>
</TABLE> - RIGHT

Table rows

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.

Usage

<TABLE>
<TR ALIGN=CENTER>

Table cells

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).

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).

Usage

<TD WIDTH="50%" NOWRAP>some data</TD> - NHTML
<TD COLSPAN=2 ALIGN=RIGHT VALIGN=TOP WIDTH=50>some data</TD> - RIGHT
Example Table with all Tags/Attributes
The BountyMutiny on the High SeasRowspan=2 ALIGN=CENTER VALIGN=CENTER
Centered colspan=2
Starring...Captain QueegAnd a cast of thousands...

Recent Changes

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 ([email protected]) 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.
nextprev

Comments are welcome


Revised: Jan. 31, 1997

URL: https://webreference.com/html3andns/table.html