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

• Web Design Syllabus

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!*

Extend

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.