tbody element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The tbody element contains a block of rows (tr) representing the body section of a table. This element can be useful to specify which rows provide content data in the table, in contrast to those that are part of a header or a footer.

Multiple bodies can be declared in a single table, as a way of thematically separating content rows in it.

The tbody element must be declared after any other element in the table with the exeption of tfoot.

In previous versions of the standard, the tbody element had several presentational attributes that have been removed in HTML5. Authors should drop their use in favor of style sheets.

Examples

Our first example consist of a table with a single tbody containing all data rows. Additionally, we're declaring a header section.

<table class="egt">
  <thead>
    <tr>
      <th>Client</th>
      <th>Operation</th>
      <th>Amount</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jhon Doe</td>
      <td>Deposit</td>
      <td>$2,500.00</td>
      <td>$2,500.00</td>
    </tr>
    <tr>
      <td>Mark Finn</td>
      <td>Deposit</td>
      <td>$5,000.00</td>
      <td>$5,000.00</td>
    </tr>
    <tr>
      <td>Sam Smith</td>
      <td>Deposit</td>
      <td>$3,000.00</td>
      <td>$3,000.00</td>
    </tr>
  </tbody>
</table>
Client Operation Amount Balance
Jhon Doe Deposit $2,500.00 $2,500.00
Mark Finn Deposit $5,000.00 $5,000.00
Sam Smith Deposit $3,000.00 $3,000.00

In the following example we'll create a table with its rows thematically organized in three bodies, each one for a different client.

<table class="egt">
  <thead>
    <tr>
      <th>Client</th>
      <th>Operation</th>
      <th>Amount</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jhon Doe</td>
      <td>Deposit</td>
      <td>$2,500.00</td>
      <td>$2,500.00</td>
    </tr>
    <tr>
      <td>Jhon Doe</td>
      <td>Withdrawal</td>
      <td>-$1,000.00</td>
      <td>$1,500.00</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Mark Finn</td>
      <td>Deposit</td>
      <td>$5,000.00</td>
      <td>$6,500.00</td>
    </tr>
    <tr>
      <td>Mark Finn</td>
      <td>Withdrawal</td>
      <td>-$1,000.00</td>
      <td>$5,500.00</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Sam Smith</td>
      <td>Deposit</td>
      <td>$3,000.00</td>
      <td>$8,500.00</td>
    </tr>
    <tr>
      <td>Sam Smith</td>
      <td>Withdrawal</td>
      <td>-$2,500.00</td>
      <td>$6,000.00</td>
    </tr>
  </tbody>
</table>
Client Operation Amount Balance
Jhon Doe Deposit $2,500.00 $2,500.00
Jhon Doe Withdrawal -$1,000.00 $1,500.00
Mark Finn Deposit $5,000.00 $6,500.00
Mark Finn Withdrawal -$1,000.00 $5,500.00
Sam Smith Deposit $3,000.00 $8,500.00
Sam Smith Withdrawal -$2,500.00 $6,000.00

In the previous example you can see no difference between one body and the others. Nevertheless, the rows in each tbody are still thematically grouped in the code. To reflect this grouping when the document is rendered, authors can use style sheets to provide borders or change the background color of the bodies.

Attributes

Specific attributes

align

The horizontal alignment of text in all affected cells. There are five possible values (case-insensitive):

  • left: text is aligned to the left margin. This is the default value for data cells (td).
  • center: text is centered. This is the default value for header cells (th).
  • right: text is aligned to the right margin.
  • justify: text is justified or aligned to both margins.
  • char: text is aligned to a specific character. It's used together with the char attribute.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheet declarations.

Example

<tbody align="center">

char

A caracter that will act as axis for text alignment. It's meant to work together with the align attribute when it has the "char" value. In other situations it will be completely ignored.

This attribute has become obsolete in HTML5 and its use is consequently invalid. Authors are adviced to replace it with style sheet declarations.

Example

<tbody align="char" char="c">

charoff

An offset, from the first occurrence of the alignment caracter (specified in the char attribute) and in the direction of the text. The resulting character of this calculation will be the axis for text alignment.

For this attribute to be considered, the align attribute's value must be "char" and the char attribute must be present.

This attribute is considered obsolete by HTML5 and its use is no longer recommended. Authors should drop its use in favor of style sheets.

Example

<tbody align="char" char="t" charoff="7">

valign

The vertical alignment of text in all affected cells. There are four possible values (case-insensitive):

  • top: text is aligned to the top margin.
  • middle: text is vertically centered.
  • bottom: text is aligned to the bottom margin.
  • baseline: all the cells in a row with this alignment should have their first text line on a common baseline.

This attribute is obsolete according to the HTML5 standard and, therefore, invalid. Authors are adviced to avoid its use and replace it with style sheet declarations.

Example

<tbody valign="top">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.