Goal
You’ll be able to build a properly structured, accessible table, and know clearly when a table is the genuinely correct choice versus when it’s being misused for layout purposes.
Learn
Tables exist specifically for tabular data — information genuinely organized in rows and columns with real relationships between them, like a pricing comparison or a schedule:
<table>
<thead>
<tr>
<th scope="col">Plan</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>$9/mo</td>
</tr>
</tbody>
</table>
<thead> and <tbody> separate header rows from data rows structurally, not just visually. <th> marks header cells, with a scope attribute ("col" or "row") telling screen readers whether that header applies to a column or a row — genuinely important, since a screen reader user navigating cell-by-cell relies on this to know which header applies to the data they’re currently on, something a sighted user infers instantly just by looking at the table’s visual position.
The historically common mistake, especially before CSS layout tools like Flexbox and Grid existed, was using tables purely for visual page layout — wrapping an entire page’s structure in a table just to create side-by-side columns, with no actual tabular data relationship at all. This is genuinely wrong: it misrepresents the page’s structure to screen readers (which will announce “table” and try to navigate it as tabular data), and modern CSS layout tools handle real layout needs far better anyway.
Decision Task
A page needs two columns side by side purely for visual layout purposes — an image on the left, text on the right, with no actual tabular data relationship between them. Before reading on: is a table the correct choice here?
Show Answer
No — this is a layout need, not genuine tabular data, so it should use CSS (Flexbox or Grid) instead. Using a table here would misrepresent the page’s structure to screen readers, which would announce it as a table and attempt to navigate it as tabular data, creating a confusing experience for no real informational benefit.
Common Mistake
Using <table> purely for visual page layout, a common pattern from before modern CSS layout tools existed. Beyond being semantically incorrect, this creates real accessibility problems: a screen reader announces “table” and offers table-specific navigation, actively confusing a screen reader user with content that isn’t genuinely tabular data at all.
Practice Questions
1. A comparison chart shows three phone models with their price, storage, and battery life in a genuine grid relationship. Is a table the correct choice here?
Show Answer
Yes — this is genuinely tabular data with real row/column relationships between the models and their specifications, exactly what table is designed for.
2. What does the scope attribute on a <th> element specify?
Show Answer
Whether that header cell applies to its column (“col”) or its row (“row”), helping screen readers announce the correct header context for each data cell.
3. What’s the structural difference between <thead> and <tbody>, beyond visual styling?
Show Answer
They semantically separate header rows from actual data rows, which assistive technology and browsers use to understand the table’s real structure, not just apply different visual styling.
4. True or False: using a table for pure visual page layout was historically common, but is now considered a real accessibility mistake.
Show Answer
True — this was common before modern CSS layout tools existed, but is now recognized as misrepresenting page structure to assistive technology.
5. Why does scope matter more for a screen reader user than a sighted user reading the same table?
Show Answer
A sighted user instantly infers which header applies to a cell just from its visual row/column position; a screen reader user navigating cell-by-cell has no such visual context, relying entirely on scope to know which header applies.
Try It Yourself
Without looking back, sketch (in words or simplified tags) the basic structure of a table showing two students’ names and grades — what top-level elements would you use, and in what order?
Show Answer
<table> wrapping <thead> (containing one <tr> with <th scope=”col”> for “Name” and “Grade”) followed by <tbody> (containing two <tr> rows, each with <td> cells for that student’s actual name and grade data).
Quick Check
1. What is a table genuinely meant for?
Show Answer
Tabular data with real row/column relationships, like a schedule or comparison chart.
2. What does <th> represent, as opposed to <td>?
Show Answer
A header cell, as opposed to a regular data cell.
3. What was the historically common table misuse this lesson warns against?
Show Answer
Using tables purely for visual page layout, with no genuine tabular data relationship.
4. What accessibility problem does table-based layout create for screen reader users specifically?
Show Answer
The screen reader announces it as a table and offers table-specific navigation, confusing users with content that isn’t genuinely tabular.
5. What are the two valid values for the scope attribute?
Show Answer
“col” and “row”.