TD - Table Data Cell

<TD>...</TD>

ROWSPAN=Number (rows spanned by the cell)
COLSPAN=Number (columns spanned by the cell)
HEADERS=IDREFS (list of header cells for current cell)
ABBR=Text (abbreviation for header cell)
SCOPE=[ row | col | rowgroup | colgroup ] (cells covered by header cell)
AXIS=CDATA (category of header cell)
ALIGN=[ left | center | right | justify | char ] (horizontal alignment)
CHAR=Character (alignment character)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment)
WIDTH=Pixels (cell width)
HEIGHT=Pixels (cell height)
NOWRAP (suppress word wrap)
BGCOLOR=Color (cell background color)
ID=string
CLASS=string
STYLE=string
TITLE=string
LANG=Language (i.e. RU - Russian)
DIR=ltr|rtl
SCRIPTING EVENTS=string

Inline elements, block-level elements

TR

The TD element defines a data cell in a table. TD elements are contained within a TR element (a table row), which may also contain TH elements for header cells. When a cell's contents act as both header information and table data, TD should be used.

The ROWSPAN and COLSPAN attributes of TD specify the number of rows and the number of columns, respectively, that are spanned by the cell. The default value is 1. The special value 0 indicates that the cell spans all rows or columns to the end of the table. The value 0 is ignored by most browsers, so authors may wish to calculate the exact number of rows or columns spanned and use that value.

The HEADERS attribute specifies the header cells that apply to the TD. The value is a space-separated list of the header cells' ID attribute values. The HEADERS attribute allows non-visual browsers to render the header information for a given cell.

The ABBR, SCOPE, and AXIS attributes should only be used if the cell provides header information. Like HEADERS, these attributes are new in HTML 4.0 and not well supported, though they should be particularly helpful to non-visual browsers in the future.

ABBR gives an abbreviated version of the cell's content. This allows visual browsers to use the short form if space is limited, and non-visual browsers can give a cell's header information in an abbreviated form before rendering each cell.

The SCOPE attribute specifies the cells for which the TD element provides header information. SCOPE is a simpler alternative to using HEADERS if the arrangement of header cells is not complex. Possible values are as follows:

• row, when the TD provides header information for the rest of the row;
• col, when the TD provides header information for the rest of the column;
• rowgroup, when the TD gives header information for the rest of the row group (i.e., the remaining cells of the THEAD, TFOOT, or TBODY);
• colgroup, when the TD gives header information for the rest of the column group (i.e., the remaining cells of the COLGROUP).

The AXIS attribute provides a method of categorizing cells. The attribute's value is a comma-separated list of category names. See the HTML 4.0 Recommendation's section on categorizing cells for an application of AXIS.

The ALIGN attribute specifies the horizontal alignment for the cell. Possible values are left, center, right, justify, and char. ALIGN=char, poorly supported among browsers, aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

• top, which positions data at the top of the cell;
• middle, the default value, which centers the cell data vertically;
• bottom, which positions data at the bottom of the cell;
• baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

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.