In this challenge we are learning how to draw and format a table on a web page using a range of HTML tags and CSS properties.
First you may want to read a bit more about how HTML tables are built using the <TABLE>, <THEAD>, <TBODY>, <TR>, <TH> and <TD> HTML tags.
Remember the key syntax for CSS is as follows:
In this challenge we will use various CSS properties such as:
You can learn more about all these CSS properties on w3schools.com.
We will also use different types of selectors such as:
- element child-element
- element child-element:first-child
You can learn more about CSS selectors on w3schools.com.
We have created a timetable for you.
Task 1: By changing the HTML code, you can now change the content of this timetable: you can add your own lessons to reproduce your own timetable. You may want to change the structure of the day (e.g. Does your school day consist of 5 lessons?) by adding or deleting rows to this timetable.
Task 2: By changing the CSS code, you can now change the look & feel of your timetable. Change the colour scheme, the choice of fonts, the spacing (padding / margin) between table cells, etc.