Home | HTML Tutorials | JavaScript Editor

Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor.

TBODY - Table Body

The TBODY element defines a group of data rows in a table. A TABLE must have one or more TBODY elements, which must follow the optional TFOOT. The TBODY end tag is always optional. The start tag is optional when the table contains only one TBODY and no THEAD or TFOOT. This allows the simple table structure of HTML 3.2 to still be valid:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
</TABLE>

By explicitly grouping rows with THEAD, TFOOT, and TBODY, authors give browsers the ability to present a long table with a scrolling body and static header and footer rows. Using TBODY also provides the ability to easily suggest different presentations for different row groups through style sheets. While few browsers currently support TBODY, it can be used with no harm on non-supporting browsers.

The following example gives a table of SI units of measure. TBODY elements are used to group rows based on whether the unit is classed as a "base" unit, "derived" unit, or "supplementary" unit.

<TABLE SUMMARY="This table lists SI (International System) units of
                measure, giving the name of the unit, its symbol, and
                the quantity that it measures.">
  <CAPTION>SI Units</CAPTION>
  <THEAD>
    <TR>
      <TH SCOPE=col>Name</TH>
      <TH SCOPE=col>Symbol</TH>
      <TH SCOPE=col>Quantity</TH>
    </TR>
  </THEAD>
  <TBODY CLASS=base>
    <TR>
      <TD SCOPE=row>meter</TD>
      <TD>m</TD>
      <TD>length</TD>
    </TR>
    <TR>
      <TD SCOPE=row>kilogram</TD>
      <TD>kg</TD>
      <TD>mass</TD>
    </TR>
    ...
  </TBODY>
  <TBODY CLASS=derived>
    <TR>
      <TD SCOPE=row>hertz</TD>
      <TD>Hz</TD>
      <TD>frequency</TD>
    </TR>
    <TR>
      <TD SCOPE=row>pascal</TD>
      <TD>Pa</TD>
      <TD>pressure</TD>
    </TR>
    ...
  </TBODY>
  <TBODY CLASS=supplementary>
    <TR>
      <TD SCOPE=row>radian</TD>
      <TD>rad</TD>
      <TD>plane angle</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In addition to the attributes common to most elements, TBODY takes presentational attributes for specifying the alignment of cell data. Since few browsers support TBODY, authors may wish to specify these attributes on the TR or TD elements instead.

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. ALIGN=char 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 VALIGN=baseline should occur on a common baseline.

More Information

• TBODY in W3C HTML 4.0 Recommendation

Home | HTML Tutorials | JavaScript Editor

Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor.