What is the difference between th and td?

th is a header cell that titles a row or column; td is an ordinary data cell. Screen readers read data cells together with their headers.

What does the scope attribute do on a th?

It says whether the header is the title of its column (scope="col") or its row (scope="row"), so assistive technology can associate each data cell with the right headers.

Why shouldn't you use tables for page layout?

Screen readers announce them as data tables, which is confusing, and fixed table layouts don't adapt to small screens. CSS layout (flexbox and grid) is the right tool.

Tables — HTML5 for Beginners: Build Your First Web Pages

What you'll learn

How to build a table from rows and cells.
How to add headers and a caption so the table makes sense.
How to make a cell span several columns or rows.
When to use a table, and when not to.

The idea

Tables show data in rows and columns: timetables, prices, results. They're built from a few elements:

Element	Meaning
`<table>`	The whole table
`<caption>`	The table's title
`<tr>`	A table row
`<th>`	A table header cell (a column or row title)
`<td>`	A table data cell (an ordinary cell)
`<thead>`, `<tbody>`, `<tfoot>`	Groups of rows: the header, the body and the footer

You build a table row by row: each <tr> holds that row's cells, from left to right.

<table>
  <caption>Opening hours</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Open</th><th scope="col">Close</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>9:00</td><td>17:00</td></tr>
    <tr><th scope="row">Saturday</th><td>10:00</td><td>14:00</td></tr>
  </tbody>
</table>

scope="col" says a header is the title of its column, and scope="row" the title of its row. Screen readers use this to read each cell with its titles, for example "Saturday, Close, 14:00".

Spanning cells

colspan="2" makes a cell two columns wide; rowspan="2" makes it two rows tall.

Tables are for data, not layout

In the early 2000s, people used tables to arrange whole pages into columns. Don't. It confuses screen readers and breaks on phones. Use tables only for tabular data, and use CSS for layout.

Try it

A timetableTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tables</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 6px 12px; text-align: left; }
  </style>
</head>
<body>
  <h1>Swimming pool</h1>
  <table>
    <caption>Opening hours this week</caption>
    <thead>
      <tr><th scope="col">Day</th><th scope="col">Open</th><th scope="col">Close</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Monday to Friday</th><td>7:00</td><td>21:00</td></tr>
      <tr><th scope="row">Saturday</th><td>8:00</td><td>18:00</td></tr>
      <tr><th scope="row">Sunday</th><td colspan="2">Closed</td></tr>
    </tbody>
  </table>
  <p>The small &lt;style&gt; block in the head adds borders. You'll learn CSS after this course.</p>
</body>
</html>

Your turn

Add a row for a bank holiday that's open from 10:00 to 16:00.
Add a fourth column, "Lessons", with "Yes" or "No" for each day. Don't forget the header cell.
Build a small table of three friends and their favourite foods, with a caption.

Common mistakes

Rows with different numbers of cells. Every row should add up to the same number of columns (counting colspan).
Using <td> for headings. Header cells should be <th>, so screen readers can announce them.
No caption. A <caption> tells everyone what the table is about.
Tables for page layout. Use CSS instead.

Key points

A table is built row by row: <table>, <tr>, <th> and <td>.
Add a <caption>, use <th> with scope for headers and group rows with <thead> and <tbody>.
colspan and rowspan merge cells.
Tables are for data only, never for page layout.