You don’t know HTML tables
A deeper look at HTML tables: the Table Object Model, header semantics, structure, and accessibility.
HTML tables are among the oldest elements on the web, which is exactly why so many people are sure they know them inside out. Frank Taylor’s article shows that this is not quite the case.
The author explores tables in much greater depth than typical tutorials:
- Table terminology: how to think in terms of row groups, header cells, and data structure, rather than just
<tr>and<td> - Table Object Model: an underused DOM API for working with tables (rows, cells, section APIs)
- Header semantics: when
scopeis enough, and when cells need to be connected throughheaders - Proper structure: why split a table into
<thead>,<tbody>, and<tfoot>, and how this affects accessibility - Practical patterns: JS helpers and techniques for complex tables
The main point: tables are more than just a “grid for data.” They are a complete semantic model that screen readers and browsers can interpret much more deeply than we usually assume.
If you have ever built complex tables (financial, analytical, or with multilevel headers), this article does a great job of showing the real potential of HTML tables.