html · level 2 · unit 3 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<thead>, <tbody> and <tfoot> split a table into parts.
Bigger tables have parts. <thead> is the : the row of column names. <tbody> is the : the facts. <tfoot> is the : totals or notes at the bottom.
Each part holds whole rows. Screen readers use the parts to tell names from facts, and some browsers repeat the head at the top of every printed page.
Leave <tbody> out and the browser quietly adds one around your rows, so every table has a body anyway.
<table>
<caption>Camping kit</caption>
<thead>
<tr><th>Item</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Tent</td><td>£60</td></tr>
<tr><td>Torch</td><td>£8</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>£68</td></tr>
</tfoot>
</table>Press show my page to see it here.
The order inside a table is always caption, head, body, then foot.
guess first
Nobody wrote <tbody>. Is there one on the page?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<table>
<tr><th>Planet</th><th>Moons</th></tr>
<tr><td>Earth</td><td>1</td></tr>
<tr><td>Mars</td><td>2</td></tr>
</table>your turn
Your turn. Give the scores a head and a body.
Wrap the first row in <thead> and the other two rows in <tbody>. Fill all four blanks.
Press show my page to see it here.
- the column names are in the headnot checked yet
- the scores are in the bodynot checked yet
- the body holds only factsnot checked yet
fix it
The total shows above the prices. Can you fix it?
Press show my page to see it here.
- the total sits in the table footnot checked yet
- the head holds only column namesnot checked yet
- The total comes second, above the prices it adds up. Which part of the table is it in?
- Totals belong in the table foot, at the bottom.
- Move the Total row into a new
<tfoot>after</tbody>.
nailed it
your table has a head, body and foot. :D
<thead>holds the column names.<tbody>holds the facts, and browsers add it if missing.<tfoot>holds totals at the bottom.
new words in your collection
- table head
- table body
- table foot
This lesson isn’t saved. A free account remembers every lesson you finish.