What it shows
An HTML table with rows, headings and merged cells shows a weekly timetable, and CSS stripes the rows for easy reading. It teaches tables, colspan and the nth-child selector.
The science
A table is made of rows (tr) with heading cells (th) and data cells (td). Where one cell must cover several columns, as for lunch break, the colspan attribute stretches it. CSS can pick every even row with tr:nth-child(even), so alternate rows have different colours and the eye follows each line.
Materials
Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.
- A computer, laptop or phone with a browser (free)
- A text editor and a web browser (free)
- Your own class timetable written on paper
- A notebook and a pencil
Safety
This project uses safe, everyday materials. Still, read the rules below with a parent before you start.
Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.
All the safety rulesStep by step
8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.
Create timetable.html and add <h1>Class 7 timetable</h1>, then <table> ... </table>.
Add the first row: <tr><th>Day</th><th>Period 1</th><th>Period 2</th><th>Period 3</th><th>Period 4</th></tr>.
Add a row for Monday: <tr><td>Monday</td><td>Maths</td><td>English</td><td>Science</td><td>Hindi</td></tr> and rows for Tuesday to Saturday.
For a day with a game period, write one cell as <td colspan="2">Games</td> and remove one other cell so the row still has five columns.
In a <style> block add table { border-collapse: collapse; width: 100%; } and th, td { border: 1px solid #888; padding: 8px; text-align: center; }.
Add th { background: #1f3a5f; color: white; } and tr:nth-child(even) { background: #eef3fa; }.
Add td:hover { background: #ffe9a8; } so the cell under the mouse is highlighted.
Check that every row has the right number of columns, and view the page on a phone by sending the file to yourself.
What you should see
A neat timetable with a dark header row, striped lines, a merged Games cell and a highlight when the mouse is over a cell.
Viva questions
A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.
1What is tr?
A table row.
2What does colspan do?
Makes a cell cover more than one column.
3What does nth-child(even) select?
Every second row, so rows alternate in colour.
4What happens if a row has too few cells?
The table looks uneven, so colspan must be matched by removing cells.
Take it further
Use JavaScript to highlight today’s row by reading new Date().getDay().
Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.
Free ebooks for this project
Computer & office
Computer Fundamentals Study Book
The complete study notes, practice questions and glossary for Computer Fundamentals
English & skills
Handbook for Computer Teachers
Plan lessons, run a computer lab and help every student learn