<TH>NN all IE all HTML 3.2  

<TH>...</TH>

HTML End Tag: Optional  

The th element is a container for content that is rendered inside one cell of a table element in a format that distinguishes it as a header. Most browsers render the content as boldface. A cell is the intersection of a column and row. Other elements related to the th element are caption, col, colgroup, table, tbody, td, tfoot, thead, and tr. In addition to providing a wrapper for a cell's content, the th element defines a number of visible attributes that apply to a single cell, often overriding similar attributes set in lesser-nested elements in the table.

Four attributesabbr, axis, headers, and scopeare included in the HTML 4 specification in anticipation of nonvisual browsers that will use text-to-speech technology to describe content of an HTML pagea kind of "verbal rendering." Although these attributes are briefly described here for the sake of completeness, there is much more to their application in nonvisual browsers than is relevant in this book on Dynamic HTML. Consult the HTML 4 recommendation for more details.

 
Example
 
<TABLE cols="3">
<THEAD>
<TR>
<TH>Time</TH><TH>Event</TH><TH>Location</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>7:30am-5:00pm</TD><TD>Registration Open</TD><TD>Main Lobby</TD>
</TR>
<TR>
<TD>9:00am-12:00pm</TD><TD>Keynote Speakers</TD><TD>Cypress Room</TD>
</TR>
</TBODY>
</TABLE>
 
Object Model Reference
 
[window.]document.getElementById(elementID)
 
Element-Specific Attributes
 
abbralignaxisbackgroundbgcolor
bordercolorbordercolordarkbordercolorlightchchar
charoffchoffcolspandatafldheaders
heightnowraprowspanscopevalign
width
 
Element-Specific Event Handler Attributes
 
HandlerNNIEHTML
onafterupdaten/a4n/a
onbeforeupdaten/a4n/a
onrowentern/a4n/a
onrowexitn/a4n/a
abbrNN 6 IE 6 HTML 4  

abbr="text"

Optional  

Provides an abbreviated string that describes the cell's content. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

 
Example
 
<TH abbr="What">Event</TH>
 
Value

Any quoted string.

 
Default

None.

alignNN all IE all HTML 3.2  

align="alignConstant"

Optional  

Establishes the horizontal alignment characteristics of content within the cell covered by the th element.

 
Example
 
<TH align="center">
 
Value

HTML 4 and various browsers implement different sets of attribute values.

The values center, left, and right are self-explanatory. The value justify spaces multi-line content so that text is justified down both left and right edges. For the value char, the char attribute must also be set to specify the character on which alignment revolves. In the HTML 4 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column.

 
Default

left

 
Object Model Reference
 
[window.]document.getElementById(elementID).align
axisNN 6 IE 6 HTML 4  

axis="text"

Optional  

Provides an abbreviated string that describes the cell's category. This is usually a brief label that a nonvisual browser would speak to describe what the value of the cell represents. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

 
Example
 
<TH axis="event">Events</TH>
 
Value

Any quoted string.

 
Default

None.

 
Object Model Reference
 
[window.]document.getElementById(elementID).axis
backgroundNN 4 IE 3 HTML n/a  

background="URL"

Optional  

Specifies an image file that is used as a backdrop to the cell. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available cell space. Smaller images download faster but are obviously repeated more often in the background. Navigator 4, however, requires a minimum image size of 16 by 16 pixels. Animated GIFs are also allowable, but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle.

 
Example
 
<TH background="watermark.jpg">
 
Value

Any valid URL to an image file, including complete and relative URLs.

 
Default

None.

 
Object Model Reference
 
[window.]document.getElementById(elementID).background
bgcolorNN 3 IE 3 HTML 3.2  

bgcolor="colorTripletOrName"

Optional  

Establishes a fill color (behind the text and other content) for the cell defined by the th element.

 
Example
 
<TH bgcolor="yellow">
 
Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

 
Default

Varies with browser, browser version, and operating system.

 
Object Model Reference
 
[window.]document.getElementById(elementID).bgColor
bordercolorNN n/a IE 3 HTML n/a  

bordercolor="colorTripletOrName"

Optional  

The colors used to render some of the pixels that create the illusion of borders around cells and the entire table. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

 
Example
 
<TH bordercolor="green">
 
Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

 
Default

Varies with browser and operating system.

 
Object Model Reference
 
[window.]document.getElementById(elementID).borderColor
bordercolordark, bordercolorlightNN n/a IE 3 HTML n/a  

bordercolordark="colorTripletOrName" bordercolorlight="colorTripletOrName"

Optional  

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color (see Figure 8-4 in the table element discussion). You can independently control the colors used for the dark and light lines by assigning values to the bordercolordark (left and top edges of the cell) and bordercolorlight (right and bottom edges) attributes.

Typically, you should assign complementary colors to the pair of attributes. There is also no rule that says you must assign a dark color to bordercolordark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

 
Example
 
<TH bordercolordark="darkred" bordercolorlight="salmon">
 
Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

 
Default

Varies with operating system.

 
Object Model Reference
 
[window.]document.getElementById(elementID).borderColorDark
[window.]document.getElementById(elementID).borderColorLight
charNN 6 IE n/a HTML 4  

char="character"

Optional  

The char attribute defines the text character used as an alignment point for text within a cell. This attribute is of value only for the align attribute set to "char". Microsoft documents a ch attribute, which corresponds to the standards-based char attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the char attribute.

 
Example
 
<TH align="char" char=".">$325.10</TH>
 
Value

Any single text character.

 
Default

None.

charoffNN 6 IE n/a HTML 4  

charoff="length"

Optional  

The charoff attribute lets you set a specific offset point at which the character specified by the char attribute is to appear within a cell. This attribute is provided in case the browser default positioning does not meet with the design goals of the table. Microsoft documents a choff attribute, which corresponds to the standards-based charoff attribute. In any case, the browser does not respond to either attribute. Netscape 7 has not yet connected support for the charoff attribute.

 
Example
 
<TH align="char" char="." charoff="80%">
 
Value

Any length value in pixels or percentage of cell space.

 
Default

None.

choff  

  

See charoff.

colspanNN all IE all HTML 3.2  

colspan="columnCount"

Optional  

The colspan attribute specifies the number of columns across which the current table cell should extend itself. For each additional column included in the colspan count, one less th or td element is required for the table row. If you set the align attribute to center or right, the alignment is calculated on the full width of the th element across the specified number of columns. Unless the current cell is also specifies a rowspan attribute, the next table row returns to the original column count.

 
Example
 
<TH colspan="2" align="right">
 
Value

Any positive integer, usually 2 or larger.

 
Default

1

 
Object Model Reference
 
[window.]document.getElementById(elementID).colSpan
datafldNN n/a IE 4 HTML n/a  

datafld="columnName"

Optional  

Used with IE data binding to associate a remote data source column name with the content of a table header cell. A datasrc (and optionally, a datapagesize) attribute must also be set for the enclosing table element. Works only with text file data sources in IE 5/Mac.

 
Example
 
<TABLE datasrc="DBSRC3" datapagesize="5">
<TR>
  <TH datafld="stockNum"></TH>
  <TH datafld="qtyOnHand"></TH>
</TR>
</TABLE>
 
Value

Case-sensitive identifier.

 
Default

None.

headersNN 6 IE 6 HTML 4  

headers="cellIDList"

Optional  

Points to one or more th or td elements that act as column or row headers for the current table cell. The assigned value is a space-delimited list of id attribute values that are assigned to the relevant th elements. A nonvisual browser could speak the cell's header before the content of the cell to help listeners identify the nature of the cell content. Although mainstream Version 6 browsers claim support for this attribute, neither have yet connected support for it.

 
Example
 
<TR>
<TH id="hdr1">Product Number</TH>
<TH id="hdr2">Description</TH>
</TR>
<TR>
<TH headers="hdr1">0392</TH>
<TH headers="hdr2">Round widget</TH>
</TR>
 
Value

A space-delimited list of case-sensitive IDs assigned to cells that act as headers to the current cell.

 
Default

None.

height, widthNN all IE all HTML 3.2  

height="length" width="length"

Optional  

The rectangular dimensions of a cell that may be different from the default size as calculated by the browser. When the values for these attributes are less than the minimum space required to render the table cell content, the browser overrides the attribute settings to make sure that all content appears, even if it means that text lines word-wrap. You can also stretch the dimensions of a table beyond the browser-calculated dimensions. Extra whitespace appears inside table cells to make up the difference. If you specify just one of these attributes, the browser performs all necessary calculations to automatically adjust the dimension along the other axis.

Due to the regular nature of tables, if you set a custom height for one cell in a row, the entire row is set to that height; similarly, setting the width of a cell causes the width of all cells in the column to be the same size.

Both the height and width attributes are deprecated in HTML 4 in favor of height and width style sheet attributes (which are not available for table cells in Navigator 4).

 
Example
 
<TH width="80%" height="30">
 
Value

Any length value in pixels or percentage of available space.

 
Default

Based on content size.

 
Object Model Reference
 
[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width
langNN 3 IE 4 HTML 4  

lang="languageCode"

Optional  

The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.

 
Example
 
<SPAN lang="de">Deutsche Bundesbahn</SPAN>
 
Value

Case-insensitive language code.

 
Default

Browser default.

 
Object Model Reference
 
[window.]document.getElementById(elementID).lang
nowrapNN all IE all HTML 3.2  

nowrap

Optional  

The presence of the nowrap attribute instructs the browser to render the cell as wide as is necessary to display a line of nonbreaking text on one line. Abuse of this attribute can force the user into a great deal of inconvenient horizontal scrolling of the page to view all of the content. The nowrap attribute is deprecated in HTML 4. The nowrap attribute is deprecated in HTML 4 in favor of the white-space:nowrap CSS attribute and value.

 
Example
 
<TH nowrap>
 
Value

The presence of this attribute sets its value to true.

 
Default

false

 
Object Model Reference
 
[window.]document.getElementById(elementID).noWrap
rowspanNN all IE all HTML 3.2  

rowspan="rowCount"

Optional  

The number of rows through which the current table cell should extend itself downward. For each additional row included in the rowspan count, one less th or td element is required for the next table row in that cell's position along the row.

 
Example
 
<TH rowspan="2">
 
Value

Any positive integer, usually 2 or larger.

 
Default

1

 
Object Model Reference
 
[window.]document.getElementById(elementID).rowSpan
scopeNN 6 IE 6 HTML 4  

scope="scopeConstant"

Optional  

The range of cells (relative to the current cell) that behave as though the current cell is the header for those cells. For tables whose structure is quite regular, the scope attribute is a simpler way of achieving what the headers attribute does, without having to define id attributes for the header cells. Although maintstream Version 6 browsers claim support for this attribute, neither have yet connected support for it.

 
Example
 
<TR>
<TH scope="col">Product Number</TH>
<TH scope="col">Description</TH>
</TR>
<TR>
<TD>0392</TD>
<TD>Round widget</TD>
</TR>
 
Value

One of four recognized scope constants:

 
Default

None.

valignNN all IE all HTML 3.2  

valign="alignmentConstant"

Optional  

Determines the vertical alignment of content within the td element. A value you set for an individual cell overrides the same attribute setting for outer containers, such as tr and tbody.

 
Example
 
<TH valign="bottom">
 
Value

Four constant values: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell's contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the valign attribute to baseline. This assures that the character baseline of the first (or only) line of a cell's text aligns with the other cells in the rowusually the most aesthetically pleasing arrangement.

 
Default

middle

 
Object Model Reference
 
[window.]document.getElementById(elementID).vAlign
width  

  

See height.