TABLE - Table

<TABLE>...</TABLE>

SUMMARY=Text (purpose/structure of table)
WIDTH=Length (table width)
BORDER=Pixels (border width)
FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (outer border)
RULES=[ none | groups | rows | cols | all ] (inner borders)
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
ALIGN=[ left | center | right ] (table alignment)
BGCOLOR=Color (table background color)
ID=string
CLASS=string
STYLE=string
TITLE=string
LANG=Language (i.e. RU - Russian)
DIR=ltr|rtl
SCRIPTING EVENTS=string

An optional CAPTION, followed by zero or more COL and COLGROUP elements, followed by an optional THEAD element, an optional TFOOT element, and then one or more TBODY elements

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

The TABLE element defines a table for multi-dimensional data arranged in rows and columns. TABLE is commonly used as a layout device, but authors should avoid this practice as much as possible. Tables can cause problems for users of narrow windows, large fonts, or non-visual browsers, and these problems are often accentuated when tables are used solely for layout purposes. As well, current visual browsers will not display anything until the complete table has been downloaded, which can have very noticeable effects when an entire document is laid out within a TABLE. Authors should try to use style sheets in place of TABLE for layout, though bugs in current browser implementations of style sheets can make this difficult.

The TABLE may contain a number of optional elements to provide a rich structure to the table. The optional CAPTION element gives a caption for the table and is followed by optional COL and COLGROUP elements that specify column widths and groupings. The THEAD, TFOOT, and TBODY elements then follow with groups of rows. The optional THEAD and TFOOT elements contain header and footer rows, respectively, while TBODY elements supply the table's main row groups. A row group contains TR elements for individual rows, and each TR contains TH or TD elements for header cells or data cells, respectively.

At least one TBODY element is required within a TABLE, but TBODY's start and end tags are both optional if there is only one TBODY and no THEAD or TFOOT. A simple table could thus be expressed as follows:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
  <TR>
    <TD>IMHO</TD>
    <TD>In My Humble Opinion</TD>
  </TR>
  <TR>
    <TD>OTOH</TD>
    <TD>On The Other Hand</TD>
  </TR>
</TABLE>

The same table could be expressed with a richer structure by grouping rows and adding a caption, as in the next example. The extra structural information allows an author to more easily suggest the presentation of the table using style sheets or TABLE's presentational attributes.

<TABLE>
  <CAPTION>Common Usenet Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Abbreviation</TH>
      <TH>Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>

The TABLE element takes an optional SUMMARY attribute to describe the purpose and/or structure of the table. The overview provided by the SUMMARY attribute is particularly helpful to users of non-visual browsers. With simple tables, a good CAPTION is usually a sufficient summary, but complex tables may benefit from a more detailed overview via the SUMMARY attribute. The following example uses SUMMARY to describe a table. Note that the summary could also be included in a paragraph before the table, which is helpful since few browsers support SUMMARY.

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for symbols and Greek letters.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col>Character</TH>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>Latin small f with hook</TD>
      <TD>&amp;fnof;</TD>
      <TD>&amp;#402;</TD>
      <TD>&amp;#x192;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

The WIDTH attribute specifies the width of the table as a number of pixels or as a percentage of the available horizontal space. Widths in pixels should be avoided, especially widths above 500 pixels, since this causes unnecessary horizontal scrolling for some users.

The BORDER attribute specifies the width in pixels of the border around a table.

The FRAME attribute, poorly supported by browsers, specifies which sides of the table's outer border are visible. Possible values are void for no border, above for a top border only, below for a bottom border only, hsides for left and right borders only, vsides for top and bottom borders only, lhs for a left border only, rhs for a right border only, and either box or border for a border on all sides. The default value is void unless the BORDER attribute gives a positive width, in which case FRAME=border is the default. <TABLE BORDER> is a valid, well-supported shorthand for <TABLE FRAME=border>.

The RULES attribute, poorly supported by browsers, specifies the borders between table cells. Possible values are none for no inner borders, groups for borders between row groups and column groups only, rows for borders between rows only, cols for borders between columns only, and all for borders between all cells. None is the default value if BORDER=0 is used or if no BORDER attribute is given. All is the default value for any other use of BORDER.

The CELLSPACING attribute defines the amount of space between table cells, and the CELLPADDING attribute defines the amount of space within table cells (i.e., between the border and cell contents). The value may be given as a number of pixels or as a percentage, though most browsers do not support percentages, treating CELLPADDING="20%" as if it were CELLPADDING="20". A percentage value is relative to the vertical space available for vertical padding or spacing, and the amount is split evenly between the top and bottom. Horizontal padding and spacing behave similarly. The padding or spacing is always applied to all four sides.

The padding properties of Cascading Style Sheets allow an author to suggest different padding for different sides, but are not as well supported as the CELLPADDING attribute.

The deprecated ALIGN attribute suggests the horizontal alignment of the table on visual browsers. Possible values are left, right, and center. Browsers generally present left- or right-aligned tables as floating tables, with the content following the TABLE flowing around it. To prevent content from flowing around the table, use <BR CLEAR=all> after the end of the TABLE.

The deprecated BGCOLOR attribute suggests a background color for the table. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

• <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
• <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
• <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
• <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
Yahtzee is my <EM>favorite</EM> game!
</OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

• He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
• <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
• <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

• ONCLICK, when the mouse button is clicked on an element;
• ONDBLCLICK, when the mouse button is double-clicked on an element;
• ONMOUSEDOWN, when the mouse button is pressed over an element;
• ONMOUSEUP, when the mouse button is released over an element;
• ONMOUSEOVER, when the mouse is moved onto an element;
• ONMOUSEMOVE, when the mouse is moved while over an element;
• ONMOUSEOUT, when the mouse is moved away from an element;
• ONKEYPRESS, when a key is pressed and released over an element;
• ONKEYDOWN, when a key is pressed down over an element;
• ONKEYUP, when a key is released over an element.