365 days: cap them or summarise them
Capping keeps every day reachable by sorting. Summarising answers the same question the chart answers. Both say what they did.
A real HTML table beside every chart holds the same numbers, and it works for screen readers, for keyboards, for people who want exact values and for anyone who wants to copy the data. Sort it, cap it, and summarise big data first.
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.
Write the HTML for a table twin of two stations: Quay 7,078 and Lantern 7,260, with the right caption and scopes.
A column mixes numbers and the text n/a. Write a one-line clean step before the table.
Explain it without notes
Why a real table and not styled divs?
What is the difference between display:none and a details element for a table twin?
How should a sortable column be built, and what must it tell a screen reader?
What are the two honest ways to handle a 365-row twin?
Preview
Console
Nothing logged yet.Expected console output
Option 1 rows in the table: 20
Option 1 note: Showing the first 20 of 365 rows. Sort a column to bring others to the top.
Option 2 rows: 12
Option 2 first row: 2025-01 | 43,439 | 2025-01-21 (1,628)
Option 2 note: ""