Th/Td

Table Header/Data Cell Support Key: TH: [2\|3\|3.2\|4] [X1\|X1.1] [IE2\|*M2A8\|N1.1\|O2.1] TD: [2\|3\|3.2\|4] [X1\|X1.1] [IE2\|M2A8\|N1.1\|O2.1*]	What is it? Attributes Tag Example	Parent/Content Model Tips & Tricks Browser Peculiarities
= Index DOT Html by Brian Wilson =

Main Index | Element Tree | Element Index | HTML Support History

Quick Statistics
End Tag:		Optional
Standards Details:		In all HTML 4.x/XHTML DTDs
XHTML Modules:		Basic Tables, Tables
CSS 'display' Type:		"table-cell"
CSS Mapping:		NA
Default Rendering:		NA
Official Docs:		HTML 4.x, XHTML 1.1

What is it?: The Table Header(TH) and Table Data(TD) elements are part of the original Simple Table Model and are also part of the newer, backward compatible Complex Table Model. These two elements are used to identify table cells for HTML tables. All displayable content in a table will be contained within a TH or TD cell. Header cells are identical to data cells in all respects except common rendering: the TH typical default horizontal alignment is CENTER and text within is made BOLD - TD typical default horizontal alignment is LEFT and text within is unmodified.

Common Attributes
%Core%: [2|3|3.2|4] [X1|X1.1] [IE3|M|N4B2|O3.5]
%Accessibility%: 2|3|3.2|4] [X1|X1.1] [IE4B1|M|N6|O5]
%Events%: [2|3|3.2|4] [X1|X1.1] [IE4B1|M|N6B1|O4]
%Language%: [2|3|3.2|4] [X1|X1.1] [IE4|M|N6B1|O]
%Editing%: [2|3|3.2|4] [X1|X1.1] [IE5.5|M|N|O]
Specific Attributes
Abbr
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
This attribute defines an abbreviated name for a header cell. If no abbreviation is listed, the default abbreviation is the cell content.; Values: CDATA.
Align
[2|3|3.2|4] [X1|X1.1] [IE2|M2A8|N1.1|O2.1]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
This controls the horizontal alignment of content within the current table cell.; Values: Left | Center | Right | Justify | Char
Axis
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
This defines a name for a cell and will usually only be applied to TH cells. This allows for a table to be mapped to a tree hierarchy (most useful perhaps in non-visual rendering environments) where the nodes are represented by the axis names and the leaves of the nodes are the data cells of the Axis.; Values: CDATA. [Comma-separated list of axis/category names]
Background
[2|3|3.2|4] [X1|X1.1] [IE3A1|M|N4B3|O4]: Standards Details: NA; Required? No; Description:
This attribute specifies a background image to be placed in the current table cell. All cell contents will be displayed over this image. If the referenced image is smaller than the table cell size, it will be tiled to fit all of the cell area. The value for this attribute indicates the URL to reference the graphic.; Values: Either an absolute or relative URL. All URLs should be URL encoded where required.
BGColor
[2|3|3.2|4] [X1|X1.1] [IE2|M3|N3B1|O2.1]: Standards Details: Deprecated in HTML 4.x/XHTML 1.0. Dropped in XHTML 1.1 in favor of CSS.; Required? No; Description:
This attribute sets the background color to be used for the current table cell.; Values: CDATA. [The standard HTML color specification method values apply.]
BorderColor
[2|3|3.2|4] [X1|X1.1] [IE2|M|N|O]: Standards Details: NA; Required? No; Description:
This attribute sets the internal border color to be used for the current table cell. Display of this attribute is dependent on the presence of the BORDER attribute in the TABLE element.; Values: The standard HTML color specification methods.
BorderColorDark
[2|3|3.2|4] [X1|X1.1] [IE2|M|N|O]: Standards Details: NA; Required? No; Description:
This attribute allows independent, 3-D color control over the upper and left hand borders of the internal cell border color for the current table cell. To change the lower and right hand borders of the internal cell border color for each cell in the current row, use the BorderColorLight attribute (see below.) Display of this attribute is dependent on the presence of the BORDER attribute in the TABLE element.; Values: The standard HTML color specification methods.
BorderColorLight
[2|3|3.2|4] [X1|X1.1] [IE2|M|N|O]: Standards Details: NA; Required? No; Description:
This attribute allows independent, 3-D color control over the lower and right hand borders of the internal cell border color for each cell in the current table cell. To change the upper and left hand borders of the internal cell border color for each cell in the current row, use the BorderColorDark attribute (see above.) Display of this attribute is dependent on the presence of the BORDER attribute in the TABLE element.; Values: The standard HTML color specification methods.
Char
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
This attribute specifies a character in the cell content to be used to align the data data in the current cell (the first occurrence should be used.) The default value for this attribute is the decimal point character for the current specified language.; Values: CDATA.
Charoff
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
This attribute specifies the spacing offset to the first occurrence of the alignment character (specified by the CHAR attribute) on each line of the current cell. The direction of the offset is determined by the current text direction (set with the DIR attribute or the BDO element.) In left-to-right scenarios (default), offset is from the left margin. In right-to-left scenarios, offset is from the right margin.; Values: CDATA. [Integers indicating pixel offset values.]
Colspan
[2|3|3.2|4] [X1|X1.1] [IE2|M2A8|N1.1|O2.1]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
Specifies how many cell columns of the table this cell should span. If this attribute is used, no cell information is specified where corresponding cell data would otherwise be in a similar table layout filled with single cells that do not span.; Values: CDATA. [Specified in integers with the default being 1. A value of zero should span the from the current column all the way to the end of the current column group (colgroup.)]
Headers
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
This attribute specifies the list of header cells that provide header information for the current data cell. This can help in non-visual rendering situations to explicitly bind header information about data cells.; Values: CDATA. [Space separated list of table cell ID values.]
Height
[2|3|3.2|4] [X1|X1.1] [IE2|M|N1.1|O2.1]: Standards Details: Deprecated in HTML 4.x/XHTML 1.0. Dropped in XHTML 1.1.; Required? No; Description:
Specifies the height of the current cell. A row in HTML tables can only have a single height, so generally this sets the height for an entire row. This attribute is not listed in the Tables specification, and in cases where more than one explicit height is specified for cells in a single column, the outcome is browser dependent.; Values: CDATA. [Specified in integer pixel values or a percentage of the browser window height.]
NOWRAP
[2|3|3.2|4] [X1|X1.1] [IE2|M2A8|N1.1|O2.1]: Standards Details: Deprecated in HTML 4.x/XHTML 1.0. Dropped in XHTML 1.1 in favor of CSS ('white-space' property); Required? No; Description:
This is a stand-alone attribute which specifies that the data within the current cell will not use normal HTML line-breaking conventions. The table cell will enlarge to fit whatever data is specified in the cell (unless explicit line-breaking tags are added.); Values: NA (HTML); nowrap (XHTML)
Rowspan
[2|3|3.2|4] [X1|X1.1] [IE2|M2A8|N1.1|O2.1]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
Specifies how many cell rows of the table this cell should span. If this attribute is used, no cell information is specified where corresponding cell data would otherwise be in a similar table layout filled with single cells that do not span.; Values: CDATA. [Specified in integers with the default being 1. A value of zero should span the from the current row all the way to the end of the current row group (thead/tfoot/tbody.)]
Scope
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
This attribute specifies the set of data cells for which the current header cell provides header information. This attribute may be used in place of the HEADERS attribute, particularly for simple tables.; Values:
row - Current cell provides header information for the rest of the row that contains it.
col - Current cell provides header information for the rest of the column specified for it.
rowgroup - Current cell provides header information for the rest of the row group that contains it.
colgroup - Current cell provides header information for the rest of the column group that contains it.
VAlign
[2|3|3.2|4] [X1|X1.1] [IE2|M2A8|N1.1|O2.1]: Standards Details: In all HTML 4.x/XHTML DTDs; Required? No; Description:
The VAlign attribute specifies the vertical alignment of the contents of the cell relative to the cell boundaries.; Values: Top | Middle | Bottom | Baseline
Width
[2|3|3.2|4] [X1|X1.1] [IE2|M3|N1.1|O2.1]: Standards Details: Deprecated in HTML 4.x/XHTML 1.0. Dropped in XHTML 1.1.; Required? No; Description:
Specifies the width of the current cell. A column in an HTML table can only have a single width and that width used is usually the widest value of all the cells in a column. So, if a width explicitly specified for a cell is smaller than the eventual calculated width of another cell in the column, the larger value will be used instead. This attribute is not listed in the Tables specification, and in cases where more than one explicit width is specified for different cells in a single column, the outcome can be browser dependent.; Values: CDATA. [Specified in integer pixel values or a percentage of the table width.]

Example
[Using the Simple Table Model]: <table border="2" align="left" cellpadding="5"
bordercolor="#ff0000" width="75%">
      <caption align="top">Juggling Capabilities of Waterfront Performers</caption>
      <tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th> <th>Flaming Baseballs</th> </tr>
      <tr> <td>Bob</td> <td>5</td> <td>2</td> <td>5</td> </tr>
      <tr> <td>Larry</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr>
      <tr> <td>Julie the Great</td> <td>1</td> <td>2</td> <td>20<br>(She IS great!)</td> </tr>
      <tr> <th colspan="4">NOTE: This is only a small sample</th> </tr>
</table>

Parent Model: <tr>
Content Model: %In-line Content% | %Block Content%

Tips & Tricks

The HTML Tables specification says that end tags for the TH and TD elements are not necessary. In practice, browsers are not very forgiving on this issue. You should ALWAYS use end tags for TH and TD elements - if not for better readability of your markup, then to ensure that a browser can render your document correctly.
Make sure that the only content of your top-level TABLE tags are TR elements. Also make sure that the only content of your TRs are TH or TD elements. Otherwise, some browsers may display table contents incorrectly.
The Table model (even the Simple Table Model) is easily the most complex markup structure in HTML. If you have general questions about this structure see the Table Overview.
Compatibility Tip: Centering a Table structure using any of the commonly available centering methods in HTML can cause the entire contents of the table cells to be centered in browsers that only support centering and not tables. This can cause visual display problems in such cases.
Compatibility Tip: To enable Table cell contents to display well on browsers that do not support tables, it is common practice to put either an extra space at the end of each table cell, or even better, put a <br> element at the end of the last cell in each table row (eg: <tr> <td>cell 1</td> <td>cell 2<br></td></tr>.) This is perfectly legal HTML and should cause no display problems for browsers that support tables (as there is an implied line break anyway at the end of every table cell) and should greatly improve readability on older browsers.
If you are writing your HTML by hand, it is always highly recommended to use an HTML validator, but when authoring tables, this holds doubly true, as it is easy to make mistakes in this area.
Use of the WIDTH and HEIGHT attributes for TH and TD elements can sometimes be inconsistent in Netscape and Internet Explorer. Keep this in mind when authoring.
If you are having problems with table layout and borders are turned off, it can be helpful to temporarily turn them on - this can reveal clues of why the layout is misbehaving.
DTD Note: HTML 3.2 did not contain the 'baseline' value for the VALIGN attribute.
DTD Note: The actual macros specified for the value of the WIDTH and HEIGHT attributes in HTML 4.0 were %Pixels, not %Length. This means that percentage values for these attributes would not be officially legal (although browsers do understand them.) In HTML 4.01 these macros were altered to be %Length.
HTML 4.01 adds the stipulation about row/colspans ending at the current colgroup/rowgroup (thead/tfoot/tbody) boundary.

Browser Peculiarities

Netscape does not render a table until the entire table structure is received. This behavior is very noticeable with pages using very large table structures - especially when using a slower connection. Internet Explorer tries to render the table as it receives it, which tends to affect user perception of the download time as being faster. A way to combat this difference is to break tables up into smaller chunks, if possible. (Opera behavior is not known here.)
Internet Explorer seems to be generally more tolerant of invalid HTML in the creation of table structures than Netscape or Mosaic is, but do NOT rely on this robustness; check the display on other browsers as well.
Netscape now supports the BACKGROUND attribute for placement of background images in table cells. I have never found this documented anywhere and it was a reader that alerted me to the fact. When testing the behavior, an occasional glitch seemed apparent - be sure to check display of this attribute in supporting Netscape versions for proper behavior if you plan to use it. Note also that there is one readily apparent small bug with this behavior - if the cell the background image is applied to is empty, the image will not be displayed. You can get around this by using something as simple as a non-breaking space ( ) for the cell content.
[Tests: 1, 2] The effects of the FONT element are generally not inherited by content nested inside tables. If an author wishes to ensure that the effects of the FONT element are applied everywhere, the element must also be applied for every table cell in a table (in such a case CSS would be a simpler answer.) These are the FONT attributes which apply to content within tables:
Internet Explorer
2.0: COLOR and FACE applied, SIZE ignored
3.0+: FACE applied, COLOR and SIZE ignored
Netscape:
None of the FONT element attributes has any effect on content nested in tables.
Opera:
All FONT element attributes have an effect on content nested in tables.
[Test] Opera versions 3.5 and above have an interesting artifact in the interaction of HR and tables: HR normally has a default ALIGN value of CENTER when the WIDTH is not 100%, but within table cells, the HR alignment defaults instead to the horizontal alignment of the cell. Other browsers as well as older Opera versions always obey the HR ALIGN default.
[Test] Netscape 4.x error condition bug: if a BGCOLOR and BACKGROUND attribute have been specified for the cell, and the URL to the image fails to load, the bgcolor should be used instead. Netscape 4.x does that for a moment, but then this changes to a block only the size of the broken image placeholder with the specified BGCOLOR in the upper, left corner of the cell.
[Test] Netscape 4.x has a strange rendering bug with checkbox and radio button form fields. If a BGCOLOR attribute is declared for a table - or a cell within a table - the rendering boxes of any checkboxes and radio buttons (also INPUT FILE fields to a small extent) in that cell/table will not use the indicated BGCOLOR - it will instead use the BGCOLOR of the document itself. If you use Netscape 4.x, you will see this bug apparent at almost every large-scale site you go to.
Workaround: Using the CSS 'background-color' [-->Index DOT Css] property on the checkbox or radio element itself, set to the background color of the cell/table that you are in, things will be correctly displayed.

Table Header/Data Cell