A plain list of numbers becomes an accessible data table

I have a spreadsheet of numbers to put on the page, but a plain HTML table just reads as a wall of numbers to anyone using a screen reader.

Beginner to intermediateRead 5 minDoing: half an hour7 steps

▶ Start

What you'll have at the end

A data table with thead, tbody, and scoped headers, column headers always and row headers wherever the data needs them, that a screen reader announces correctly cell by cell.

Before you start

You need

A table already on the page, built from a real table element and holding spreadsheet numbers, where every row is a plain row of table data cells with no header row, no caption, and no thead or tbody grouping.

Not covered

Tables whose headers span several columns or rows, like one heading sitting over three subheadings: those need the colgroup or rowgroup values of scope, or the id and headers attributes for the deepest cases, a different fix than the flat grid this recipe covers.

Leans on

7 steps

Where to go next

Give every icon-only button an accessible name

go there when what needs a name is a button instead of a whole data table.

Rebuild a div-soup page with real semantic landmarks

go there first if the numbers are laid out with styled divs instead of a real table element.

Checked 20 Aug 2026

Part of the HTML cookbook