Project 5: Class Timetable

Project 5: Class Timetable

Tables are real-world HTML - a timetable is the perfect table to build.

The goals

1. A <table> with a <caption>.
2. <thead> with the days and <tbody> with the periods.
3. A cell that spans two columns with colspan and one that spans rows with rowspan.

Layout

Periods down, days across:

<table>
  <caption>Weekly Timetable</caption>
  <thead>
    <tr>
      <th>Period</th><th>Mon</th><th>Tue</th><th>Wed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th><td>Math</td><td>English</td><td>Math</td>
    </tr>
    <tr>
      <th>2</th><td colspan="2">Science</td><td>Art</td>
    </tr>
    <tr>
      <th>3</th><td rowspan="2">P.E.</td><td>Music</td><td>History</td>
    </tr>
  </tbody>
</table>

Staying straight

• Use <th> for headers - they announce the row/column.
• Use <caption> right after <table>.
• colspan fills cells to the right; rowspan fills cells below.
• Keep one cell per column per row, even when one spans over them!

Checklist

• [ ] <table> with a <caption>
• [ ] <thead> and <tbody>
• [ ] At least one colspan
• [ ] At least one rowspan
• [ ] <th> for every header cell

TL;DR

Tables: table > thead/tbody + tr > th/td. colspan and rowspan merge cells.