Back Main GuestBook Contact Music (JS) Appendix

<TBODY></THEAD> - Table Header

Like <TBODY>, this tag defines a group, or section, of table rows. However, <THEAD> also defines the group to be a header for the table. The browser might use this information to, say, print the header at the top of each page should the table too long for one sheet of paper.

You may only have one <THEAD> per table.

HTML 4.0 Specification § 11.2.3

Attributes for <TBODY>

  %coreattrs %i18n %events

Presentational Attributes

  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 all the cells in the row group.
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 all the cells within the row group. 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.)


Here's a sample table using a table header 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>
<THEAD>
    <TR>
        <TH></TH>
        <TH scope="col">Item #</TH>
        <TH scope="col">Description</TH>
        <TH scope="col">Color/Option</TH>
        <TH scope="col">Size</TH>
        <TH scope="col">Price</TH>
        <TH scope="col">Quantity</TH>
        <TH scope="col">Total Price</TH>
    </TR>
</THEAD>
<TBODY>
    <TR>
        <TH scope="row">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 scope="row">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 scope="row">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 scope="row">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>
</TBODY>
<TBODY class="total">
    <TR>
        <TH colspan=7 scope="row">Subtotal</TH>
        <TD>$280.00</TD>
    </TR>
    <TR>
        <TH colspan=7 scope="row">Sales Tax</TH>
        <TD>$16.80</TD>
    </TR>
    <TR>
        <TH colspan=7 scope="row">S&amp;H (see chart below)</TH>
        <TD>$9.95</TD>
    </TR>
    <TR>
        <TH colspan=7 scope="row">Total</TH>
        <TD>$306.75</TD>
    </TR>
</TBODY>
</TABLE>