A timetable with merged cells – HTML Practice Problem

Build a timetable where some cells cover several slots.

What to build

A table with three columns and four rows (one header row and three body rows).

Requirements

Header row: Time, Room A, Room B, all th with scope="col".
Row 9:00: Maths in Room A, Art in Room B.
Row 10:00: Lunch covering both rooms, using colspan.
Row 11:00: Science in Room A, and Music in Room B.
A tfoot with one cell reading All rooms closed at noon, covering all 3 columns.

Constraints

Each row must add up to exactly 3 columns.

Example

A row with a colspan="2" cell and one other cell totals 3.

Why it works

Merged cells only line up if the remaining cells in the row still add up to the number of columns, because the browser fills each row from left to right.

Hints

Hint 1

Count each row's columns. Every row must total 3.

Hint 2

A cell with colspan="2" replaces two cells.

Hint 3

A footer cell can span the whole table.

Solution

Show one correct solution (try it yourself first)

<table>
  <thead>
    <tr><th scope="col">Time</th><th scope="col">Room A</th><th scope="col">Room B</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">9:00</th><td>Maths</td><td>Art</td></tr>
    <tr><th scope="row">10:00</th><td colspan="2">Lunch</td></tr>
    <tr><th scope="row">11:00</th><td>Science</td><td>Music</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">All rooms closed at noon</td></tr>
  </tfoot>
</table>

Lesson: Tables for data that has rows and columns →