×

html · level 2 · unit 3 · lesson 4

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. 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.