Lesson Plan

Resources → Subject Notes → Information Communication Technology ICT → Notes
Lesson Plan
Grade: Date: 01/12/2025
Subject: Information Communication Technology ICT
Lesson Topic: Know and understand the reason tables are used to structure elements within a web page
Learning Objective/s:
  • Describe why tables were historically used for page layout.
  • Explain the disadvantages of table‑based layouts compared with modern CSS techniques.
  • Identify situations where a table is appropriate versus a CSS layout.
  • Analyze legacy code to decide if a table should be replaced.
  • Apply basic HTML table tags to create a simple two‑column layout.
Materials Needed:
  • Projector or interactive whiteboard
  • Computer with internet access
  • Code editor (e.g., VS Code) and web browser
  • Sample HTML file containing a table layout
  • Handout summarising table vs. CSS pros/cons
  • Worksheet with a refactoring exercise
 Introduction:
Begin with a quick poll: who has ever seen a website that looks like a grid of boxes? Review that tables organize data in rows and columns, which early web designers also used for page layout. Today students will explore why this practice emerged and how modern CSS provides better solutions, with success measured by their ability to critique and rebuild a simple layout.
Lesson Structure:
  1. Do‑now (5') – View a legacy webpage screenshot and note layout issues.
  2. Mini‑lecture (10') – Explain historical reasons for table layouts and show example code.
  3. Guided demo (15') – Instructor builds a 2‑column table layout, highlighting <table>, <tr>, <td>.
  4. Group activity (10') – Teams compare the table layout with a CSS Flexbox version and list advantages/disadvantages.
  5. Refactoring task (15') – Students replace the table with CSS Grid, documenting changes.
  6. Check for understanding (5') – Quick quiz (Kahoot) on when to use tables vs. CSS.
Conclusion:
Summarise that tables are best reserved for genuine tabular data while CSS handles visual layout. Ask each student to write one key takeaway on an exit ticket. Assign homework to locate a table‑based layout on a personal website and rewrite it using Flexbox or Grid.