Module 5: Creating a Data Table

Overview

This module consists of a single lesson that will introduce students to the basics of creating a data table. Later (in Unit 3, Module 6) students will learn about page layout using Cascading Style Sheets. At that point, there will be an opportunity to discuss the historical practice of using HTML tables to control the layout of a page. However, using tables for layout is no longer considered a good practice, and students in this course should know that the original (and now only) purpose of tables is to display tabular data, where rows and columns are used to communicate relationships.

Lesson 1: Creating a Data Table

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson first presents a sample table, including the source code, then asks students to create their own table according to the lesson's specific instructions. Many students find HTML table markup to be initially confusing, since the information as arranged in the HTML source code is not easily navigated by column, as it is in the final table product. Therefore, we recommend that you walk students through the example source code to be sure they understand. Looking together at additional examples of tables may be helpful as well.
• It may also be helpful to show students how tables have been applied in modern web design. A link to Data Tables in Modern Web Design has been included in the Resources section of the student lesson page, although it isn't specifically required reading in the lesson activity.
• Another useful strategy for helping students to understand table markup is to find real world examples of data tables and discuss them as a class. Try to identify the HTML elements that are used to give the table it's structure.
• An extension of the above activity is to print one or more data tables, then ask students to write HTML elements on the table in their appropriate locations. For example, the entire table would have a <table> tag above it, and a </table> tag below it; each row would be proceeded by a <tr> tag and followed by a </tr> tag; and each cell would include either <th> and </th> tags, or <td> and </td> tags.
• When selecting real world tables for either of the above activities, it's important to select tables that are used properly (for data), as opposed to tables that are used for layout, since the latter is an obsolete practice.
• The student lesson page includes an example table (school lunch menu). This table has six columns and three rows, which is a different structure than the table students are asked to create in the lesson activity (which has two columns and seven rows). It is helpful to explicitly point this difference out to students; otherwise they may get stuck trying to force the assigned content into the example table's structure.
• As a last resort, you might consider whether introducing GUI web authoring software would be helpful at this point. Doing so might be premature, since the course is designed to unveil these tools in Unit 7, only after students have devoted time to understanding HTML code without cutting corners. That said, data tables pose a daunting coding challenge for some students, and designing the table visually with a GUI tool is likely to be much easier and more intuitive for them. We don't recommend this approach because once students have been exposed to an easier method they'll never want to code again. Neverthelss, we invite you to carefully consider this option if you think it would help in your classroom situation.

Example Output

When this lesson is complete, students will have added a data table to their accessibility.html file.