4.4 - Lists & Tables


  • HTML is not too hard to learn on your own. There are plenty of fantastic YouTube tutorials.

You might want to read through these if you're feeling behind:

Today's Lesson: 4.4 - Lists & Tables

Your tasks are in purple.

Your first task is to make a new file in the playground called 4.4 - tables.html
- To do this, click the "add file" button in Replit and name the file properly

Next, inside your index.html file, create a link to the new file!
- To do this, decide where the link will go and add the appropriate <a href=""> tag around some text like "click here for 4.4 - Tables".

Make sure your new file is a proper HTML file with the basic requirements (you can copy and paste from index.html).

Today's Lesson: 4.4 - Lists & Tables

For these tasks, work in the new 4.4 - Tables.html file.

We've already had a demonstration on lists and you've probably already added a list to your playground but practice makes perfect:

  • Lists, both numbered (ordered) <ol> and not numbered (unordered) <ul>

In your HTML Playground make an unordered list of your favourite media (music, movies, streams, video games, etc...)

Mr. Brash will give a quick demonstration of tables:

  • Tables allow us to make grids of data

    • <table> - To start and end the table information (similar to <ol> or <ul>)

      • <tr> - A table row. Used to define one row of cells.

      • <th> - A table heading cell. Used in the top row to create "headings" for each column.

      • <td> - A table data cell. Creates a cell or box to hold text and media.

    • By default, a table has no border. You can fix this by adding border="1" (or any whole number > 0) but this gives an older-style border. If you wish to learn dealing with borders the correct way (CSS), you should read this.

In your playground, create a table that shows your schedule for this school year (two quads and one semester).

Use mystudentinfo to help find your timetable if you forget.


  • In your playground, create a table that shows your schedule for this semester.

  • Don't forget about the Unit 0 lessons!