<tbody>

The HTML <tbody> element encapsulates the main body of a table, consisting of rows (<tr>) that hold the primary data, separate from the header (<thead>) and footer (<tfoot>) sections.

`<tbody>` Tag

The <tbody> tag groups the primary content within a table, organizing data rows inside <tr>. It works with <thead> for table headers and <tfoot> for footers, ensuring structured presentation.

Syntax

index.html

<table>
  <thead> ... </thead>
  <tfoot> ... </tfoot>
  <tbody>
    <tr>
      <td> ... </td>
    </tr>
  </tbody>
</table>

`<tbody>` Demo

Name	Age
John	25
Jane	30

index.html

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

The <tbody> section contains the table’s data rows, with each <tr> defining a row and each <td> representing a cell.

Key Points

The <tbody> tag helps differentiate content rows from headers and footers, improving structure and readability.
If omitted, browsers may automatically insert a <tbody> element when rendering the table.

CSS Properties for `<tbody>`

background-color – Sets the background color of table body cells.
border – Defines borders around table cells.
text-align – Aligns text horizontally inside cells.
vertical-align – Aligns text vertically within cells.

The <tbody> element is an essential part of table structure in HTML. It ensures that the main content of the table is separated logically from the headers and footers, improving the overall readability and organization.

<table>

The `<table>` element structures data into rows (`<tr>`) and columns (`<td>`/`<th>`), with optional `<thead>` and `<tfoot>` for better organization.

<thead>

The `<thead>` element defines a table's header, grouping `<tr>` rows with `<th>` cells to label columns consistently.