Data tables need header relationships that explain each cell. Layout grids should not use table markup solely for appearance.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: Column headers use th with appropriate scope in a simple results table. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify cell relationships
Decide which row and column headers explain a data cell. A bold first row is not enough.
Step 2: Mark simple headers
Use th with appropriate scope and a caption explaining the table’s purpose.
Step 3: Handle complexity deliberately
For multi-level headers, provide explicit associations when scope is insufficient and verify interpretation with assistive technology.
Worked scenario
Column headers use th with appropriate scope in a simple results table.
<table><caption>Practice results</caption>
<thead><tr><th scope="col">Topic</th><th scope="col">Score</th></tr></thead>
<tbody><tr><th scope="row">React</th><td>8 / 10</td></tr></tbody>
</table>The score has both React as its row context and Score as its column context. Styling can change appearance without removing these relationships.
Common mistake
A visually styled first row is not automatically a semantic header.
Verify the behavior
Navigate data cells with assistive technology and verify header announcements. Test horizontal overflow while preserving access to all columns.
Interview exercise
Handle a complex comparison table.
Answer and reasoning
Provide explicit header associations when simple scope is insufficient and test interpretation with assistive technology.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.