Lessons · HTML and CSS · th, and which way it runs
th, and which way it runs
Real <th> cells let each data cell be announced with its header. scope says whether that header runs down a column or across a row.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Without th, a cell reading 'Friday' is announced as 'Friday' with no clue the column was 'Due'. With it, the header comes along with the cell, which is the whole point of a table.
How to think about it
Headers on the top row take scope="col"; headers down the first column take scope="row". Plenty of tables have both.
Worked example
<table><tr><th scope="col">Name</th><th scope="col">Due</th></tr><tr><td>Ada</td><td>Fri</td></tr></table>The browser reports two th cells, both with scope 'col'. It will read the scope back to you, so there is no need to guess whether it took.
Your turn
The scope value for a header at the top of a column.
scope=""
Write a page and watch it render
The trap
A table used to place things side by side announces as data with a structure, and then hands the user a structure with no information in it. Layout is what grid and flex are for.