HTML tables present tabular data (rows and columns of related data) — not layout. An accessible table uses proper structure so screen readers can announce headers with each cell.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> with scope — marks header cells. scope="col" for column headers, scope="row" for row headers. Screen readers then announce "North, Revenue: $12,000" instead of reading cells without context.<caption> — a title for the whole table, the first child of <table>; read out to orient users.<thead>/<tbody>/<tfoot> — group header, body, and summary rows; help navigation and let the header repeat when printing.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Layout tables confuse screen readers (they announce data-table semantics) and are inflexible. Use CSS Grid/Flexbox for page layout.
Proper table semantics (<th scope>, <caption>, sectioning) are what make data tables usable for screen reader users — they tie each value to its row and column headers.
Reserve <table> strictly for genuine tabular data.