HTML Tables: Captions, Rows and Accessible Headers

Content updated October 16, 2026

By the end, you can…

Use rows, data cells, and header cells to present related data.
Associate simple row and column headers with their values.

Before you begin

Group related information with lists

One idea at a time

A table helps a reader compare data along two directions. In a learning schedule, rows might be days and columns might be the topic and study time. Use a table when those relationships matter. Do not use a table to position the header, sidebar, or other layout parts of a webpage.

table contains the whole table. Each tr defines a row. Inside a row, td contains a data value and th identifies a header. A header is not merely bold text: it explains other cells. Start with a simple rectangular table in which each row has the same number of cells.

A caption names the table as a whole. For a simple table, scope="col" identifies a column header and scope="row" a row header. These associations help readers understand a value without repeatedly guessing which labels apply to it.

Read a table from the outside inward

Remember first

A table contains rows; each row contains cells. Headers explain what the data means.

Build the data structure

<table>Whole table: Wraps the caption and rows. Use it for related data, not page layout.
<tr>One row: Contains th and td cells. Close each cell before starting the next.
<th>Header cell: scope="col" identifies a column header; scope="row" identifies a row header.
<td>Data cell: Holds a value, such as Headings. In the wide-cell preview, colspan="2" makes one cell cover two columns.

Name and organize the table

<caption>Table name: Put it inside table, before the row groups.
<thead>Group of heading rows: Contains tr elements, not individual cells directly.
<tbody>Group of data rows: Contains the main tr elements. Simple examples may put tr directly inside table; explicit groups make the source clearer.
<tfoot>Optional summary rows: Can hold a total or summary. All the table elements shown here have closing tags.

Walk through an example

html

<table>
  <caption>My learning schedule</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>Headings</td></tr>
    <tr><th scope="row">Tuesday</th><td>Lists</td></tr>
  </tbody>
</table>

Read the Tuesday row: its row header tells you the day, and the Topic column header explains Lists. The caption describes the whole schedule. thead groups the header rows and tbody groups the data rows. You can understand these relationships even before adding visible borders or other styling.

See it happen: try a small change

Read a cell with its headers

Choose the highlighted cell. Identify its day and its column before reading the explanation.

Code to notice

<table>
<caption>Study plan</caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>Headings</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td>Lists</td>
</tr>
</tbody>
</table>

Live result

Lesson example

index.htmlPreview

What changed: The caption names the table. Column headers describe Day and Topic; the day names are row headers.

Spanning cells is a second step

colspan makes one cell cover several columns; rowspan makes one cell cover several rows. They do not create extra data by themselves. If a cell covers two columns, do not also add two ordinary cells into the same space. Sketch the intended grid before writing spans.

Keep your first data table simple. Multi-level headers can need more detailed associations than a basic scope value. A tfoot can group a summary such as a total, but it is optional. Use sections that match your data rather than adding every possible table element.

The preview includes presentation styles so you can see the cells clearly. Those borders are not part of the HTML relationship being taught. Avoid copying the old border attribute from older tutorials; use CSS when you reach styling. A plain table is a successful result for this lesson.

Try it in your browser

Place the table inside body. Save and refresh; a plain table without the preview’s borders is expected. Trace one row from its day header to its topic, then add the Minutes header and a minutes cell to every body row. Each row should still line up with the same columns.

A common wrong turn

Using td for every cell and making the first row look bold does not create header semantics. Also avoid using tables for page layout. Ask whether each data cell has a meaningful row and column relationship before choosing table.

Change one thing

Add Wednesday as another row. Then add a Minutes column, giving every row a value. Check that the values remain below the correct headers.

Your turn: plan three days of learning

Create a three-day learning schedule with Day, Topic, and Minutes columns. Give it a caption, column headers, and day names as row headers. Use the browser’s plain appearance; no CSS is needed.

Try this in your own HTML file, then open the page in a browser. There is no separate checked practice for this task yet.

Sketch three columns and decide what each row represents.
Build the caption, header row, and three body rows.
Pick any minutes value and name both its day and column. Check that no cell has shifted under the wrong heading.

Go to the source

MDN: Organize data in an HTML table ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.

Organize data in an HTML table