Tables for data that has rows and columns

Introduction

Timetables, price lists, exam results: some information only makes sense when you can read across a row and down a column. HTML has a set of elements made for exactly this, and using them properly lets someone who cannot see the grid still understand it.

How it works

A table is built row by row, not column by column. table holds tr rows, and each row holds cells: th for a header and td for data. The browser lines the columns up for you.

Grouping. thead, tbody and tfoot split a table into its heading, its main rows and its totals. They are not decoration. They let CSS style each part, and they let a browser repeat headers when a long table is printed across pages.

Captions. caption gives the table a title. It must come immediately after the opening table tag. A screen reader announces it first, so a listener knows what the table is about before diving in.

Scope. Imagine hearing a table cell read out: "85". Eighty-five what? Whose? scope="col" on a th says that this header labels its whole column. scope="row" says it labels its row. With those in place, a screen reader can announce "Rina, Maths, 85".

Merging cells. colspan="2" stretches a cell across two columns, and rowspan="2" stretches it down two rows. When you do this, you must leave out the cells it covers, so that each row still adds up to the same total. If a row comes out too long or short, the table's columns will fall out of line.

When not to use a table. In the early web, people laid out entire pages with invisible tables. Do not do that. Screen readers announce a table as data, and layout tables are hard to adapt to phones. Layout is what CSS grid and flexbox are for. If removing the headers would leave nothing meaningful, it was never a table.

Syntax

<table>
  <caption>Results</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Score</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Rina</th><td>85</td></tr>
  </tbody>
</table>

Example

Line by line

1. border="1" is an old attribute, used here only so you can see the grid. In real pages, use CSS.
2. caption names the table.
3. The thead row labels each column, and scope="col" says so in code.
4. In tbody, the first cell of each row is a th with scope="row".
5. colspan="2" makes "Library hour" cover both day columns, so that row has only two cells.

Expected result

A grid with a title, three columns and two rows of data. In the last row, "Library hour" spans the two day columns.

In the real world

Dashboards, invoices, bank statements and sports tables are all tables. Programs that read web pages, such as spreadsheet importers, also rely on this structure. On phones, wide tables are a common problem, and they are usually placed in a container that scrolls sideways.

Common mistakes

• Using a table for layout.
• Rows of unequal length, caused by forgetting to remove the cells that a colspan covers.
• Styling td to look like a header instead of using th.
• Placing the caption anywhere other than first.

Best practices

• Always add a caption, or at least a heading directly before the table.
• Use th with scope for every header.
• Keep tables as simple as you can: merged cells are hard to read aloud.

Summary

Tables are for data in rows and columns. They are built from tr, th and td, grouped by thead, tbody and tfoot, and titled by caption. scope connects data to its headers, and colspan and rowspan merge cells, as long as every row still adds up.

Mark lesson complete