LESSON PLAN: HTML Tables

Lesson Overview:

This lesson assumes that students have been trained on the basics of HTML and can properly form, save and display HTML pages in a browser.  It is also assumed that students are familiar with HTML tag attributes and how they function.

HTML tables are the primary vehicle that Web designers use to organize and layout Web page content.  The instructor will discuss how tables are used to structure Web pages and why tables are such a flexible tool for Web designers.  The basic HTML tags used to create tables will be discussed in detail along with some of the most common attributes used to modify the functions of the basic HTML table tags.  Students will perform exercises during the class to practice learned skills and will be required to create a project at the end of class that demonstrates their proficiency in applying the learning objectives of the class.

Length of Lesson:

One two-hour session

Notes:

This lesson is number three in a series of five lessons that comprise the basic HTML learning model.

Instructional Objectives:

Students will:

• Use Notepad to write code for their HTML pages
• Use Internet Explorer Web browser to display HTML pages
• Create “well-formed” tables in HTML
• Use attributes to format table cell content to enhance the “look and feel” of the table content

Supplies:

Computers with Microsoft Notepad and Internet Explorer installed.  Students will need a storage device such as a floppy disk or CD ROM to store projects.

Instructional Plan:

What are HTML tables and how are they used:

The instructor will discuss the use of HTML tables as a page layout and design tool.  Limitations of HTML in regards to formatting content will be discussed and demonstrated.

HTML table tags:

The structure and function of the following HTML table tags will be discussed and demonstrated by the instructor:

            <TABLE>

            <CAPTION>

            <TR>

            <TH>

<TD>

Students will complete Exercise 1 – Creation of a basic table.

Basic HTML table attributes:

Like all HTML tags, attributes are used in tables to modify and format the table contents.  The instructor will discuss and demonstrate common attributes used in formatting tables.  Emphasis will be placed on the cascading effect of using attributes within table cells versus table rows and the <TABLE> tag itself.

The instructor will discuss format and output of the following attributes:

            Width=”x, x%”

Border=”x”

            Bordercolor=”hexadecimal color code or accepted color name”

Align=”left, center, right”

            Bgcolor=”hexadecimal color code or accepted color name”

             

Students will complete Exercise 2  - Using attributes to modify HTML tags

There are many more attributes that will be discussed in future learning modules but all are structured as we have discussed.

Sources:

Print

• LeMay, Laura, Teach Yourself Web Publishing with HTML 4 in 14 Days. Indianapolis: Sams.net 2000.

Assessment:

Students will complete the Assessment 1 exercise to demonstrate understanding of basic HTML table tags and the use of attributes to modify those tags.

Author:

Norman W. Benton

Lehigh Valley College

Center Valley, PA