A table is only accessible if its structure is markup. A grid made of divs is announced as a run of unrelated text, and the listener loses which value belongs to which row. Use the table element when the data has rows and columns.
About 1 min of reading
Convert a fake grid to a real table
Find the fake grid
Before you run it, say out loud what it will print. Then open the answer.
Write the real one
| Tier | Lessons |
|---|---|
| Basic | 7 |
Before you run it, say out loud what it will print. Then open the answer.
Style without breaking it
Before you run it, say out loud what it will print. Then open the answer.
Check the announcement
Before you run it, say out loud what it will print. Then open the answer.
Before you write anything, put these lines back in the right order. Click a line to move it up one step. This support step is easier than writing code from scratch, and it is here to make the last example stick.
If each row is really one object with fields, a definition list or a list of small blocks is often clearer. A table is for comparing values across a shared set of columns.
Reflowing a table into stacked blocks with CSS changes what the reader hears. Keep the table markup and let it scroll, or restructure the data, rather than faking a new layout.
<thead> with <th scope="col"> tells the reader the header applies downward. Without scope, a complex table announces a value with no column name.
Do not use a table to position things. A table used for layout announces row and column numbers for content that has none, which is noise in the listener's ear.
<caption> gives the table a name so a listener can find it among several. It is the first thing announced, so put the conclusion in it.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.