Table Element Structure

title: "Table Element Structure — thead, tbody, tfoot for Accessible Tables" description: "Learn the proper HTML structure for accessible data tables using thead, tbody, and tfoot elements that provide semantic meaning to browsers and screen readers." weight: 2 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, tables]

Proper table structure uses thead for header rows, tbody for data rows, and tfoot for summary rows, providing semantic meaning to assistive technologies.

## What You'll Learn

The correct structure of an HTML data table and how each section element contributes to accessibility.

## Why It Matters

Screen readers use thead, tbody, and tfoot to identify table sections. Without them, all rows are treated as data rows without context.

## Real-World Use

A financial report table has headers in thead, monthly data in tbody, and totals in tfoot. The screen reader announces "Table with 12 data rows, 1 header row, 1 footer row."

## Table Structure

```html
<table>
  <caption>Monthly sales report 2026</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Expenses</th>
      <th scope="col">Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$50,000</td>
      <td>$30,000</td>
      <td>$20,000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$55,000</td>
      <td>$32,000</td>
      <td>$23,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$105,000</td>
      <td>$62,000</td>
      <td>$43,000</td>
    </tr>
  </tfoot>
</table>

Row and Column Span

<table>
  <caption>Team hours</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>400</td>
      <td>420</td>
      <td>820</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>380</td>
      <td>410</td>
      <td>790</td>
    </tr>
  </tbody>
</table>

Common Mistakes

1. Missing thead

Header rows should be wrapped in thead to distinguish them from data rows.

2. Multiple tbodies without distinction

Multiple tbody elements are valid but each should have a purpose. Use id attributes if needed.

3. Tfoot before tbody

tfoot should appear after thead and before tbody in the DOM, though it renders at the bottom.

4. No caption

Every data table needs a caption to describe its purpose.

5. Nested tables

Nested tables are extremely difficult for screen reader users. Avoid them.

Practice Questions

1. What are the three main table section elements? thead, tbody, and tfoot.

2. Where does tfoot appear in the DOM? After thead and before tbody, though it renders at the bottom of the table.

3. What does the caption element provide? A title or description for the table, announced by screen readers before table navigation begins.

Challenge: Create a table with 4 columns and 8 rows of data. Include a thead, tbody, and tfoot with a total row.

FAQ

Mini Project

Create a grade report table with student names as row headers, subjects as column headers, and a total column. Use thead, tbody, and tfoot properly.

What's Next

Learn about th and Scope attributes to correctly associate headers with data cells.