Creating Tables

Lesson Content

• Lesson Plan Template:

  CTE Lesson Plan

• CTE Course Info and Benchmark Notes

  
  

  Program Title (as applicable):

  Web Development

  Course Title:

  Foundations of Web Design

  Course Number:

  9001110

  Career Cluster:

  Information Technology

  CIP Number:

  0511080104

  Course Type:

  Orientation/Exploratory

  CTE Standard(s) and Benchmark(s):

  20.01 - Describe how tables are used in web design.

  20.02 - Discuss the advantages and disadvantages of incorporating tables in a webpage design.

  20.04 - Create accessible tables using standard table elements and attributes.

• Unit Outline

  
  

  This lesson is designed to be used with the case study, “Efficient Web Design.” See CPALMS resource ID# 210812.

• Career Connection

  
  

  Data management is an important skill to learn in a career preparatory course ad many fields in the Information Technology sector require software engineers and computer science analysts to apply thinking skills to effectively collect, organize, analyze, and present data.

• Learning Objectives

  
  

  Students will be able to:

  • Describe the proper use of tables in a web page.
  • Discuss the advantages and disadvantages of incorporating tables for business purposes.
  • Create a table using a code editor based on a graphical sketch of data.
  • Present the designed data in a table element created by HTML to peers.

• Prior Knowledge

  
  

  Students should be familiar with:

  • Basic web design elements (lists, definition, frames, images, box model, etc.).
  • Layout CARP Principles (Contrast, Alignment, Repetition, Proximity).
  • Coding knowledge of HTML elements.
  • How to give oral presentations.

• Guiding Questions

  
  
  • Which elements are best to use to create effective web pages?
  • What criteria do we consider when creating a table in HTML?

• Procedure

  
  
  1. To introduce the lesson, the teacher will review the use of basic elements of web design such as lists and layout properties with students as a whole group.
  2. Teacher will then distribute the case study, “Effective Web Design” (see CPALMS Resource# 210812). Students will take time to read the case study and briefly discuss what is the best element for Molly to represent a new smoothie recipe on the family business' webpage.
     • As this lesson is inviting students to think about the use of tables in web design, guide groups of 2 or 3 students into the different ways data can be organized on a webpage. See Teacher Notes.
  3. Then, students will be divided into groups of 2. Each team will receive the Design Process worksheet (see attachments) for students to create the smoothie recipe based on specific criteria and sketch the best way to display this data information on the webpage (Questions 1 and 2).
     • Have students consider the advantages and disadvantages of using tables as an element on webpages.
  4. After students complete questions 1 and 2 on the Design Process, students will use their prior knowledge of HTML to exhibit their smoothie idea onto a code editor in a real-life webpage (Question 3).
     • Students must stay within the HTML constraints.
     • Review resources with students on the HTML requirements reflected on the worksheet if necessary.
  5. Once students are finished, each team will present their sketch along with their table to the whole class. In the presentation, each team will also explain the advantages and disadvantages they have found using a table to represent data in a webpage.
  6. To close the lesson, students will write an exit ticket on their own paper sharing one team's table design that they think was effective in displaying the data and why.

• Teacher Notes

  
  
  • Business webpages may be displayed to show students some examples of tables in web design: clothing websites, recipes, transportation schedules, etc.

• Optional

  
  

  Accommodation Suggestions:

  • Reduce the number of criteria in the creation of the smoothie and/or decrease the HTML code editor requirements.

  Extension Ideas:

  • Advanced students may use CSS to add colors and layout features to the HTML table.