Detailed answer
Table contains rows, th identifies header cells, and td identifies data cells.
Caption names the table, and row-group elements can organize it further. Keep the structure as simple as the data allows. Table markup expresses relationships; use CSS layout rather than table cells for arranging an entire page.
Example
<table><caption>Lesson progress</caption><tr><th scope="col">Lesson</th><th scope="col">Status</th></tr><tr><td>Forms</td><td>Complete</td></tr></table>
Understanding the behavior
A table represents relationships between rows and columns. Header cells describe those relationships, while data cells hold values. Use a table for tabular data rather than to position unrelated page sections.
Practical implementation notes
Read across a row and down a column to check that the structure remains consistent. Add a caption and appropriate header associations before considering visual details such as alternating row colors.
How to check it
Move across a data row and identify the matching column header for every value.
Expected result
The relationship between Lesson and Status is clear.
Watch out: Avoid empty spacer cells and tables used only for layout.
Read the reference ↗