Back Main GuestBook Contact Music (JS) Appendix

<TH></TH> - Header Table Cells

This tag defines a header table cell; it encompasses all of the cell's contents. "TH" stands for table header; it is used to define cells that serve as a header for other cells in the same row or column. Data cells use a different tag: <TD>. However, if a cell is both a header cell and a data cell, it should be of the <TD> variety.

HTML 4.0 Specification § 11.2.6

Attributes for <TH>

  %coreattrs %i18n %events

Structural Attributes

  colspan= [CN]
Gives number of columns to span.
This attribute defines the number of table columns the cell spans. The default value is "1". If a cell spans more than one column, then it takes the place of more than one cell in the row, reducing the number of cells needed to complete that row. For instance, if I had a table with four columns and four cells in each row, I could give the first cell in the first row colspan=3. It would span three columns, putting one long cell where three were before. The fourth cell would remain untouched. The code for that row would include only two cell tags: <TD colspan=3> and <TD>
The value of colspan figures in the cell count for a row.

  rowspan= [CI]
Gives number of rows to span.
This attribute defines the number of rows a cell spans. The default value is "1". If a cell spans from one row into the next, that fact must be taken into account when coding the next row: If I have a table with four columns and a cell in the first row, fourth column, has rowspan=2, then in my next row I will have only three cell tags--one for the each of the first three columns. The fourth column is taken up by an extension of the cell from the first row.

Presentational Attributes

D height= [CN]
Gives height by pixel.
Gives height by percent of table's height.
This attribute gives a recommendation of the cell's height--if the content doesn't fit in the height specified, or there is some other conflict, the cell may grow to fit the content.

D width= [CN]
Gives width by pixel.
Gives width by percent of table's width.
This attribute gives a recommended cell width--if the cell's content doesn't fit, or there is some other conflict, the cell's width might be increased.

D nowrap (nowrap=nowrap) [CI]
This attribute disables text wrap within the cell; the entire contents of the cell will be forced onto one line.

  valign= [CI]
  • middle
Specifies vertical centering of content within cells. This is the default value.
  • top
Specifies top of cells' content aligned with top of cell.
  • bottom
Specifies bottom of cells' content aligned with bottom of cell.
  • baseline
Specifies alignment of the cell's first line's baseline with the first baselines of all other cells in the row with the same alignment value.
This attriute specifies the vertical alignment of the cell's content.
See also Vertical Alignment Rules.

  align= [CI]
  • left
Specifies left alignment of cell contents.
  • center
Specifies centered cell content.
  • right
Specifies right alignment of cell contents.
  • justify
Specifies full justification of cell contents.
  • char
Specifies alignment of cell contents by the character given with char with all other cells in the same column that also have this type of alignment specified.
This attribute specifies the horizontal alignment of the cell's contents. As for align=char, I've yet to see a browser that supports it.
See also Horizontal Alignment Rules

  char= [CI]
Gives character.
This attribute gives the character which the cell contents aligns on when align is set to char. The default value is the decimal point.

  charoff= [CI]
Gives position by pixel
Gives position by percent of cell width
This attribute controls the location of the character used in character alignment (align=char). The position of the character is charoff's value from the left edge of the cell for left-to-right cells and from the right edge for right-to-left cells. (The text direction is given by the dir attribute.)

D bgcolor= [CI]
Specifies the color in hexadecimal form.
Specifies the color by name.
This attribute controls the background color cell, overriding any colors set by other tags.
See also background color rules.

Advanced Structural Attributes

  scope= [CI]
  • "row"
Cell is a header for the rest of the row (<TR>.
  • "col"
Cell is a header for the rest of the column.
  • "rowgroup"
Cell is a header for the rest of the row group (<THEAD>/<TBODY>/<TFOOT>).
  • "colgroup"
Cell is a header for the rest of the column group (<COLGROUP>).
This attribute specifies to which cells this cell applies as a header.

Here's a sample table using header cells to organize its information:

Sample Order Form
Item # Description Color/Option Size Price Quantity Total Price
1 A65103 NorthWind Ski Jacket Blue XS $89 1 $89
2 A65982 SouthWester Rain Poncho Yellow M $23 1 $23
3 T30321 Relaxed Fit Jeans Indigo 6L $34 2 $68
4 Q00984 Highlander Flannel Sheet Set Green Twin $50 2 $100
Subtotal $280.00
Sales Tax $16.80
S&H (see chart below) $9.95
Total $306.75

Here is the code for the sample above:

<TABLE>
<CAPTION>Sample Order Form</CAPTION>
<TR>
    <TH></TH>
    <TH>Item #</TH>
    <TH>Description</TH>
    <TH>Color/Option</TH>
    <TH>Size</TH>
    <TH>Price</TH>
    <TH>Quantity</TH>
    <TH>Total Price</TH>
</TR>
<TR>
    <TH>1</TH>
    <TD>A65103</TD>
    <TD>NorthWind Ski Jacket</TD>
    <TD>Blue</TD>
    <TD>XS</TD>
    <TD>$89</TD>
    <TD>1</TD>
    <TD>$89</TD>
</TR>
<TR>
    <TH>2</TH>
    <TD>A65982</TD>
    <TD>SouthWester Rain Poncho</TD>
    <TD>Yellow</TD>
    <TD>M</TD>
    <TD>$23</TD>
    <TD>1</TD>
    <TD>$23</TD>
</TR>
<TR>
    <TH>3</TH>
    <TD>T30321</TD>
    <TD>Relaxed Fit Jeans</TD>
    <TD>Indigo</TD>
    <TD>6L</TD>
    <TD>$34</TD>
    <TD>2</TD>
    <TD>$68</TD>
</TR>
<TR>
    <TH>4</TH>
    <TD>Q00984</TD>
    <TD>Highlander Flannel Sheet Set</TD>
    <TD>Green</TD>
    <TD>Twin</TD>
    <TD>$50</TD>
    <TD>2</TD>
    <TD>$100</TD>
</TR>
<TR class="total">
    <TH colspan=7>Subtotal</TH>
    <TD>$280.00</TD>
</TR>
<TR class="total">
    <TH colspan=7>Sales Tax</TH>
    <TD>$16.80</TD>
</TR>
<TR class="total">
    <TH colspan=7>S&amp;H (see chart below)</TH>
    <TD>$9.95</TD>
</TR>
<TR class="total">
    <TH colspan=7>Total</TH>
    <TD>$306.75</TD>
</TR>
</TABLE>