Stacked cards on small screens
Below 480px wide, each row becomes a card and each value shows its column name. Test this pattern with a screen reader: changing display can remove table meaning in some browsers.
Screen readers link each data cell to its headers; scope makes that link certain for simple tables and headers/id for complex ones. Use tables only for data, never for layout, and plan how a wide table behaves on a phone.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add correct scope values to a table with a header row (Plan, Price, Data) and row headers for three plans.
Write a two-level header table: Morning and Evening each span two columns (In, Out), with one row for Mon. Give it scope="colgroup" and scope="col" correctly.
Wrap any wide table in an accessible scroll container.
Explain it without notes
How does a screen reader know which headers to read for a data cell, and how do scope and headers help?
When would you choose headers/id over scope?
Why shouldn't tables be used for page layout, and what should you use instead?
What are three ways to make a wide table usable on a phone, and what does each cost?
A designer built a price comparison from divs with CSS Grid. What would you tell them?
Preview
Console
Nothing logged yet.