Body data

Add data rows inside tbody in a logical order.

Body data: tbody, tr, td

The table's actual data lives inside tbody. Each row is a tr, each data cell a td. There should be as many cells as columns; otherwise the table looks uneven. If the first cell is a row header, use th scope="row"; otherwise td is enough. In this lesson we'll add four months of sales data to tbody.

Data order and row headers

Lay out the data in a sensible order: by time (old to new) or by size. In this example the months go chronologically from January to April. Since the first column identifies the row, th scope="row" is a natural choice; a screen reader can then say "January, 320 units, $32,000" as context. Keep data cell content short and clear.

Exercise Add tbody and four rows

Take the table from the previous lesson. After </thead> open a <tbody>. Add four <tr> rows; each row's first cell is a th scope="row" (Jan, Feb, Mar, Apr), followed by three td (product, units, revenue). Data: Jan/Headphones/320/$32,000, Feb/Stylus/280/$28,000, Mar/Keyboard/410/$41,000, Apr/Mouse/440/$44,000.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Monthly Sales Report</title>
  </head>
  <body>
    <table>
      <caption>Monthly Sales Report — 2026</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Product</th>
          <th scope="col">Units</th>
          <th scope="col">Revenue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Jan</th>
          <td>Headphones</td>
          <td>320</td>
          <td>$32,000</td>
        </tr>
        <tr>
          <th scope="row">Feb</th>
          <td>Stylus</td>
          <td>280</td>
          <td>$28,000</td>
        </tr>
        <tr>
          <th scope="row">Mar</th>
          <td>Keyboard</td>
          <td>410</td>
          <td>$41,000</td>
        </tr>
        <tr>
          <th scope="row">Apr</th>
          <td>Mouse</td>
          <td>440</td>
          <td>$44,000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Test yourself

In a table with four column headers, how many cells should each body row have?
- 3
- 5
- 8
- 4
Show answer

4 — Correct. A body row should have as many cells as there are columns.
Complete the data cell's content
```
<td>____</td>
```
Show answer
```
<td>Headphones</td>
```
Match each table element to its content type

tbody

Data rows
tr

Table row
td

Data cell
th

Header cell

Next lesson: Summary row

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies