Module 5: Tables · Lesson 5 of 5
How to Make a Timetable in HTML: Table Project
All lessons in Module 5
- Table Basics
- Headers and Captions
- Spanning Cells
- Tables Are Not Layout
- Project: Class Timetable
Goal: Build a weekly timetable with a caption, header cells and spans.
Learn
A school timetable (opens in a new tab) makes an ideal table. The data is real, the grid is clear, and a few cells need to stretch. Plan it before you type:
- The
<caption>names the table. - The first row holds the column headers: a corner label like
Time, then one<th>per day. - Every other row starts with a
<th>for the time slot, followed by one<td>per day. - A double lesson gets
rowspan. A lunch break across all days getscolspan.
Draw the grid on paper and count the cells in each row. A stretched cell counts once for every column or row it covers, as you saw in Spanning Cells.
The short version
- A timetable is tabular data through and through, with days across the top and time slots down the side.
- Mark the days with
<th scope="col">and the time slots with<th scope="row">. - A double lesson gets
rowspan, and the row below it loses one cell. - For a lunch break across all days, set
colspanto the number of day columns. The time column does not count.
Example
<table>
<caption>Swim club timetable</caption>
<tr>
<th>Time</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<tr>
<th scope="row">08:00</th>
<td colspan="2">Warm-up</td>
</tr>
</table>Your task
Inside <main>, build a timetable for a class. Your own class or a made-up one both work:
- A
<table>whose first element is a<caption>containing the wordtimetable. - A first row of at least 4
<th>cells: a corner label plus at least 3 days. - At least 3 lesson rows, each starting with a
<th>time slot followed by<td>cells (at least 8<td>cells in total). - At least one double lesson using
rowspan. - A lunch cell using
colspanacross all the days.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<tr>
<th scope="row">12:00</th>
<td colspan="4">Lunch</td>
</tr>Right
<tr>
<th scope="row">12:00</th>
<td colspan="3">Lunch</td>
</tr>The time header already takes the first column, so with three day columns lunch spans 3; a span of 4 makes the row stick out.
Wrong
<p>
<table>
<caption>Weekly timetable</caption>
</table>
</p>Right
<table>
<caption>Weekly timetable</caption>
</table>Tables may not sit inside a paragraph, so the browser patches the markup itself, usually by ending the paragraph early and adding an empty one.
Go deeper
Timetables, from school schedules to train departures, are among the most common tables on the web. Production versions usually group the day headers in <thead> and the time slots in <tbody>. CSS then has a clean hook for styling the header row, and many browsers repeat that header on every printed page.
Short labels need a little care. If you write Mon for Monday, wrap it in <abbr title="Monday">, the abbreviation element (opens in a new tab). Time slots can go in <time>09:00</time> so machines can read the values.
Schedules grow. Before any spans, build the plain grid with every slot filled and check that each row has the same number of cells. Then merge cells one at a time, deleting each covered cell right away, and the grid never drifts out of shape.
If Math happens on Monday and Wednesday, write it in both cells. A merge is for a single event, like one long lab or one shared lunch. For more practice, try the table puzzles in the HTML challenges.
Frequently asked questions
How do I make a timetable in HTML?
Use a <table> with a <caption>. The first row is a set of <th> day headers plus a corner label such as Time. Every other row opens with a <th scope="row"> time slot and then has one <td> per day. Lessons that last two slots get rowspan, and breaks that cover every day get colspan.
How do I make an HTML table fit on a phone?
Wrap the table in a <div> and give that div the CSS overflow-x: auto. The table keeps its full width and scrolls sideways inside the box, so the rest of the page stays put. Short header text helps too. Mon and Tue take far less room than full day names on a small screen.
Should the time column use th or td?
Use <th scope="row">, because the time labels the whole row. With that markup a screen reader can announce a cell as "Tuesday, 09:00, Science lab", reading the column header and the row header together. A timetable then makes sense by ear, and the page meets the WCAG rule on Info and Relationships (opens in a new tab).