Français

<tbody>

Filling the table body with data

— 1 min read

  • HTML
  • accessibility
  • semantics
  • tables

<tbody> + <tr> + <td> — The table body

<tbody> groups the data body of a table. <tr> represents a row and <td> a data cell. Together, they form the main grid of the table, distinct from the headers (<thead>) and footer (<tfoot>).

When to use it

You have a table with data. Each data row goes inside a <tr> within <tbody>. Each value goes inside a <td>. Even though the browser implicitly adds a <tbody>, writing it explicitly makes your intent clear and simplifies CSS styling.

What you gain

Accessibility: the <thead> / <tbody> / <tfoot> separation lets screen readers distinguish headers from data and totals. Users can jump between these sections without traversing every cell.

Code example

<table>
  <caption>Server response times (ms)</caption>
  <thead>
    <tr>
      <th scope="col">Endpoint</th>
      <th scope="col">P50</th>
      <th scope="col">P99</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>/api/users</td>
      <td>45</td>
      <td>120</td>
    </tr>
    <tr>
      <td>/api/orders</td>
      <td>62</td>
      <td>340</td>
    </tr>
  </tbody>
</table>

Further reading