Students build tables one row at a time with table, tr, th and td, and learn that every row needs the same number of cells.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 12 min · Modify 8 min · Mix it up 4 min · Make 10 min
Do the Make task yourself (about 5 minutes).
A table is built row by row: <tr> is a table row, <th> a heading cell and <td> an ordinary cell ("table data"). Columns are not written anywhere: they appear because every row has its cells in the same order. Students who think in columns, or in spreadsheets, often write all of one column first. Tables are for data; the look (lines, colours) comes from rules, and page layout is a later course.
<tr> as a column. Run it with Boxes on to see each row as a box going across.<tr>. The short row is the quiet failure: the browser shows it without complaint, so count cells per row.<th> in the heading row and a <td> in every other row.On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.
Look at the code. Is the first <tr> a row going across or a column going down?
Point with your arm, then tell your partner why.
Most students point across when asked, then say 3 rows of 2 when asked what the page shows. Let them see the clash before running.
Choose two things to ask the class (favourite sport and pet, say). Write the heading row, then one row for each person who answers.
Check every row has the same number of cells. Ask: what would you change to add a third question?
Building a table row by row with the same number of cells in each. Have them count the cells per row before they look at the page.
| What you will see | A question to ask | The fix |
|---|---|---|
| One row is shorter than the others, or a value sits in the wrong column. | Does every row have the same number of cells, in the same order? | Add the missing <td> so each row has a cell for every column. |
| Text appears above the table instead of inside it. | Is that text inside a <td> or <th>? | All text in a table goes inside cells; a title goes above the <table> in an <h2>. |
| The new column only has a heading. | Which rows have a cell for the new column? | Add one <td> to every data row, in the same position. |
<tr>
<td>Kestrels</td>
<td>7</td>
<td>2</td>
</tr>
One possible solution for each task. Other correct programs are fine.
<h2>House points</h2>
<table>
<tr>
<th>House</th>
<th>Points</th>
</tr>
<tr>
<td>Owls</td>
<td>12</td>
</tr>
<tr>
<td>Hawks</td>
<td>9</td>
</tr>
<tr>
<td>Kestrels</td>
<td>7</td>
</tr>
</table>
<h2>House points</h2>
<table>
<tr>
<th>House</th>
<th>Points</th>
<th>Wins</th>
</tr>
<tr>
<td>Owls</td>
<td>12</td>
<td>4</td>
</tr>
<tr>
<td>Hawks</td>
<td>9</td>
<td>3</td>
</tr>
<tr>
<td>Kestrels</td>
<td>7</td>
<td>2</td>
</tr>
</table>
<h1>Our week</h1>
<table>
<tr>
<th>Day</th>
<th>Morning</th>
<th>Afternoon</th>
</tr>
<tr>
<td>Monday</td>
<td>Maths</td>
<td>Sport</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
<td>Art</td>
</tr>
</table>
Stretch: Add a caption with <caption>House points</caption> just after <table>, and a totals row at the bottom. Style the heading cells with a th rule.
Support: Give students the Modify starter and ask them only to copy the Hawks row and change it to the Kestrels.
A table has 3 columns and 4 rows of data under the heading row. How many <td> cells does it need, and why?
12 cells: every one of the 4 rows needs a cell for each of the 3 columns (4 × 3).
Next lesson names the parts of a page with header, nav, main and footer. Tables also lead to data work: the same rows and columns are a spreadsheet, a CSV file, and later a list of lists in Python. Class idea: collect class data (favourite sport, pets) and publish it as a table.