HTML Tables in 2026 — When to Use and When to Avoid

Tables earned a bad name from the 1990s layout-abuse era. The rule today is simple: tabular data → table; page layout → CSS Grid.

Proper structure

<table>
  <caption>Semester 5 Results</caption>
  <thead><tr><th scope="col">Subject</th><th scope="col">Grade</th></tr></thead>
  <tbody><tr><td>CN</td><td>A+</td></tr></tbody>
</table>

scope="col" lets screen readers announce the right header for each cell — one attribute, big accessibility win.

The mobile problem + fix

Tables cannot wrap. The pragmatic pattern used by nearly every site (including this one):

.table-wrap { overflow-x: auto; }   /* wrap the table, let it scroll */

Sticky headers for long tables

th { position: sticky; top: 0; background: white; }

Full lesson: HTML Tables.