html · level 1 · unit 6 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<th> gives each column a name.
A table is easier to read when each column has a name, like Day and Club. Put those names in the first row, using <th> instead of <td>.
A , <th>, names its column. Browsers show it in bold and centred, so it stands out from the facts below.
Screen readers use header cells too. When they read out a fact, they can say its column name first, so a lone number still makes sense.
<table>
<tr><th>Pet</th><th>Name</th><th>Age</th></tr>
<tr><td>Cat</td><td>Mittens</td><td>5</td></tr>
<tr><td>Dog</td><td>Biscuit</td><td>3</td></tr>
</table>Press show my page to see it here.
Every column gets its own <th>, even a short one like Age.
guess first
How will the first row look?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<table>
<tr><th>Snack</th><th>Price</th></tr>
<tr><td>Crisps</td><td>80p</td></tr>
</table>your turn
Your turn. Name the columns.
Fill the first row with two header cells that name the columns, like Club and Day.
Press show my page to see it here.
- the first row has two header cellsnot checked yet
- the header cells have namesnot checked yet
fix it
Which row names the columns? Make it clear.
Press show my page to see it here.
- planet and moons are header cellsnot checked yet
- planet names the first columnnot checked yet
- Every row looks the same. Which one names the columns?
- Names for columns belong in header cells, not ordinary cells.
- In the first row only, change each
<td>to<th>and each</td>to</th>.
nailed it
your table makes sense at a glance. :D
<th>makes a header cell that names a column.- Put header cells in the first row.
- Screen readers read column names out with each fact.
new words in your collection
- header cell
This lesson isn’t saved. A free account remembers every lesson you finish.