CodeBlanks Logo Icon CodeBlanks
Login Register

Body data

HTML course · Intermediate · Lesson 26/67

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

  1. 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.

  2. Complete the data cell's content

    <td>____</td>
    Show answer 
    <td>Headphones</td>

  3. Match each table element to its content type

    tbody
    Data rows
    tr
    Table row
    td
    Data cell
    th
    Header cell

All lessons in Intermediate

1 Advanced text elements

  1. Abbr, cite and time
  2. Code, kbd and samp
  3. Sub and sup
  4. Pre and code block
  5. Wbr, bdi, bdo
  6. Summary - Technical doc

2 Advanced links

  1. Download links
  2. Ping and rel types
  3. Hreflang and canonical
  4. Link accessibility
  5. Button vs link
  6. Summary - Multilingual menu

3 Project: Landing page

  1. Project: Product landing page
  2. Hero section
  3. Feature list
  4. Pricing table
  5. Project final - Landing

4 Advanced tables

  1. Col and colgroup
  2. Scope and headers
  3. Table accessibility
  4. Responsive tables
  5. Table visual structure
  6. Summary - Comparison table

5 Project: Data table

  1. Project: Data table
  2. Header and caption
  3. Body data
  4. Summary row
  5. Project final - Data table

6 Advanced form elements

  1. Fieldset and legend
  2. Datalist and output
  3. Progress and meter
  4. Input attributes
  5. Autocomplete and inputmode
  6. Summary - Survey form

7 Form validation

  1. Required and pattern
  2. Min, max and step
  3. Minlength and maxlength
  4. Type-based validation
  5. Novalidate and formnovalidate
  6. Summary - Registration validation

8 Project: Contact form

  1. Project: Contact form
  2. Form skeleton
  3. Person fields
  4. Message and subject
  5. Project final - Contact form

9 Semantic layout

  1. Header structure
  2. Main content
  3. Sidebar and aside
  4. Footer structure
  5. Sectioning rules
  6. Summary - Magazine page

10 Accessibility basics

  1. ARIA basics
  2. Visually hidden heading
  3. Skip link
  4. Form accessibility
  5. Table accessibility
  6. Summary - Accessible card

11 Project: Site skeleton

  1. Project: Multi-page site skeleton
  2. Consistent header/footer
  3. Home page
  4. About and contact
  5. Project final - Site skeleton

12 Intermediate final

  1. Challenge - Advanced text
  2. Challenge - Accessible table
  3. Challenge - Validated form
  4. Challenge - Semantic layout
  5. Challenge - Intermediate capstone