07 HTML Tables

Posted on: April 2, 2020 | Categories: Lesson | Tags: , ! Course:

In this lesson we tackle the time-honored subject of HTML tables and learn the meaning of the phrase, “tag-soup!”

Teacher Activities

  • Check Learning Journals
  • Pre-teach Vocab (table, span, data cell)
  • Print and prepare “dog table” handout
    • I print the dog table as a handout
    • We review the table data and discuss the usefulness of tables
    • Using highlighters or colored pencils, we trace the blocks, identifying the table, rows, headers, and data cells using different colors.
  • Print and prepare the “planetary table” handout.
    • I follow the same proceedure except we focus on where the rows begin
    • The colspan/rowspan attributes make this a very confusing project for beginners.

Student Activities

  • Participate in the “basic tables” class discussion
  • Read HTML table basics and take Outline Notes
  • Prepare to code the dog table
    1. Create a new folder
    2. Open the folder with VS Code
    3. Create the dog-table.html file
    4. Code an HTML skeleton
    5. Code the dog table
    6. Show me your web page!*
  • Participate in the “advanced tables” class discussion
  • Read HTML Table advanced features and accessibility and take Outline Notes
  • Prepare to code the Assessment: Structuring planet data
    • Read the instructions and ask questions
    • Download the starter code
    • Write your code
    • Show me your web page!*


This can be a challenging assignment for students. The concepts seem simple, but the nesting and attribute dependency make debugging difficult. A peer code review, or peer programming arrangement can help students be more successful with this.

Leave a Reply

Your email address will not be published. Required fields are marked *