html · level 2 · unit 3 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
colspan and rowspan cells together.
Sometimes one fact covers several boxes, like Closed for a whole day. You can merge cells: colspan="2" makes a cell stretch across two columns, and rowspan="2" makes it stretch down two rows.
A stretched cell takes the space of the cells it covers, so leave those cells out. Then count each row: the columns it covers must still add up to the same number.
<table>
<tr><th scope="col">Day</th><th scope="col">Morning</th><th scope="col">Afternoon</th></tr>
<tr><th scope="row">Monday</th><td>Yoga</td><td>Pilates</td></tr>
<tr><th scope="row">Sunday</th><td colspan="2">Closed</td></tr>
</table> Press show my page to see it here.
Merged cells can confuse screen readers, so only merge when it truly helps people read the table.
guess first
Pottery has rowspan="2". Where does Painting go?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<table>
<tr><th scope="col">Time</th><th scope="col">Room 1</th><th scope="col">Room 2</th></tr>
<tr><th scope="row">10:00</th><td rowspan="2">Pottery</td><td>Knitting</td></tr>
<tr><th scope="row">11:00</th><td>Painting</td></tr>
</table>
your turn
Your turn. Close the shop on Sunday.
The shop is closed all day on Sunday. Make the Closed cell stretch across both the Opens and Closes columns.
Press show my page to see it here.
- closed stretches across two columnsnot checked yet
- sunday has one merged cellnot checked yet
fix it
Sunday's row sticks out past the others. Can you fix it?
Press show my page to see it here.
- sunday has one merged cellnot checked yet
- it stretches across two columnsnot checked yet
- Count the columns Sunday covers. Is it more than the other rows?
- The merged cell already covers Lunch and Dinner, so the cell after it is extra.
- Delete the second
<td>on line 4, then press run.
nailed it
your cells stretch where they should. :D
colspanstretches a cell across columns.rowspanstretches a cell down rows.- Leave out the cells that a merged cell covers.
new words in your collection
- merge
This lesson isn’t saved. A free account remembers every lesson you finish.