html · level 1 · unit 6 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A lays out facts in rows and columns.
A table is a grid of facts, like a timetable. Start it with <table>. Each goes in <tr>, short for table row, and runs across the page.
Inside each row, every box of the grid is a , written <td>, short for table data. The cells line up into columns by themselves.
Build a table row by row, from the top. Give each row the same number of cells, so each stays neat.
<table>
<tr>
<td>Monday</td>
<td>Football</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Swimming</td>
</tr>
</table>Press show my page to see it here.
A whole row can also sit on one line of code, which keeps small tables short.
guess first
How many rows and columns?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<table>
<tr><td>Cat</td><td>Mittens</td><td>5</td></tr>
<tr><td>Dog</td><td>Biscuit</td><td>3</td></tr>
</table>your turn
Your turn. Add a row to the timetable.
Add a row for Wednesday on line 4, with an activity of your choice. Give it two cells, like the other rows.
Press show my page to see it here.
- the table has three rowsnot checked yet
- the new row has two cellsnot checked yet
- the new row starts with Wednesdaynot checked yet
fix it
Priya is on Sam's row. Can you fix it?
Press show my page to see it here.
- each player has their own rownot checked yet
- the first row is Sam'snot checked yet
- Priya is squashed onto the same row as Sam. What starts a new row?
- Each row needs its own
<tr>and</tr>. - Add
</tr>after 12 points, and<tr>before Priya, then press run.
nailed it
you laid facts out in a grid. :D
<table>holds the grid, and<tr>makes each row.<td>makes one cell inside a row.- Give every row the same number of cells.
new words in your collection
- table
- row
- cell
- column
This lesson isn’t saved. A free account remembers every lesson you finish.