My Timetable in HTML / CSS

my-timetable

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:
css-syntax

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 chaneg 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 timeable. 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

Share Button
Tagged with: