<tbody> HTML Tag

Element of

HTML Tables: Find Out When To Use Them (And When To Avoid)

What does <tbody> HTML Tag do?

The <tbody> element must be a direct descendant of a <table> element and is used to identify <tr> elements that comprise the body of the table. The <tbody> element should always come after a <thead> element and may come before or after a <tfoot> element.

Display

inline

Code Example

<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
      <th>Colors</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>6</td>
      <td>ABC</td>
      <td>Primary</td>
    </tr>
  </tfoot> 
  <tbody>
    <tr>
      <td>1</td>
      <td>A</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>C</td>
      <td>Blue</td>
    </tr>
  </tbody>
</table>

A Container for the Main Contents of a Table

The tbody contains the body, or primary content, of an HTML table. Use it along with the thead and tfoot elements to add structure and semantic meaning to HTML tables. The tbody should contain the primary data presented in the table while the thead contains column headings and the tfoot contains summary data. The tbody element must contain one or more child table rows (tr elements) which contain individual table data cells (td elements. It can appear before or after the tfoot element, but it must appear after a thead element if the parent table contains a thead element. In the event that the tbody appears after the tfoot in the HTML, the browser will rearrange things and put the tfoot at the bottom of the table despite it’s position in the HTML — unless, of course, you tamper with things using CSS.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.