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

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

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

Did you like this challenge?

Click on a star to rate it!

Average rating 3.2 / 5. Vote count: 10

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: