My Timetable in HTML / CSS

Learning Objectives

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.

HTML Tables

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.

CSS Code

Remember the key syntax for CSS is as follows:

In this challenge we will use various CSS properties such as:

• font-family:
• font-size:
• color:
• font-weight:
• font-style:
• text-align:
• padding:
• background-color:
• etc.

You can learn more about all these CSS properties on w3schools.com.

We will also use different types of selectors such as:

• TAG
• .class
• #id
• element child-element
• element child-element:first-child

You can learn more about CSS selectors on w3schools.com.

My Timetable

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.

See the Pen My Timetable by 101 Computing (@101Computing) on CodePen.

Press the “Edit on CodePen” button at the top of this codepen to open in full screen mode