Tables are not just visual grids; they are structured data maps. A standard `<td>` data cell has no context on its own. To provide meaning—especially for assistive technologies—we must use Semantic Table Headers.
1The Context Provider: `<th>` vs `<td>`
While <td> (Table Data) holds the raw information, <th> (Table Header) provides the explicit structural label.
Browsers visually distinguish <th> tags by automatically bolding and centering the text. However, their true power is architectural. When a screen reader navigates to a <td> containing the number '45', it looks up the grid structure to find the nearest <th> and announces 'Age: 45'. Without the <th>, the data is orphaned and meaningless to visually impaired users.
2The Critical Scope Attribute
In complex grids, a <th> might sit at the top of a column, or it might sit on the far-left edge of a row.
To eliminate ambiguity for assistive technologies, you must pair the <th> tag with the scope attribute. The scope="col" declaration explicitly binds the header to all data cells vertically beneath it. The scope="row" declaration explicitly binds the header to all data cells horizontally beside it.
This explicit mapping is a hard requirement for ADA (Americans with Disabilities Act) compliance in modern web applications.
3Grouping Complex Header Logic
When dealing with merged cells (colspan), the scope mapping logic becomes highly complex.
If you have a primary header that spans three separate columns (e.g., 'Q1 Revenue' spanning Jan, Feb, and Mar), you must use <th scope="colgroup">. This explicitly informs the rendering engine and assistive technologies that this specific header is the parent label for a multi-column subset.
