HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 1 of 12

HTML, XHTML, and CSS, 7 th Edition

Chapter Four: Creating Tables in a Web Site
Using an External Style Sheet
A Guide to this Instructors Manual:
We have designed this Instructors Manual to supplement and enhance your teaching experience through classroom
activities and a cohesive chapter summary.

This document is organized chronologically, using the same heading in red that you see in the textbook. Under each
heading you will find (in order): Lecture Notes that summarize the section, Figures and Boxes found in the section, if
any, Teacher Tips, Classroom Activities, and Lab Activities. Pay special attention to teaching tips, and activities geared
towards quizzing your students, enhancing their critical thinking skills, and encouraging experimentation within the
software.

In addition to this Instructors Manual, our Instructors Resources CD also contains PowerPoint Presentations, Test
Banks, and other supplements to aid in your teaching experience.

For your students:

Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your students up to date with
the latest in technology news. Direct your students to http://coursecasts.course.com, where they can download the
most recent CourseCast onto their mp3 player. Ken Baldauf, host of CourseCasts, is a faculty member of the Florida
State University Computer Science Department where he is responsible for teaching technology classes to thousands of
FSU students each year. Ken is an expert in the latest technology and sorts through and aggregates the most pertinent
news and information for CourseCasts so your students can spend their time enjoying technology, rather than trying to
figure it out. Open or close your lecture with a discussion based on the latest CourseCast.

Table of Contents
Chapter Objectives 2
HTML 156: Introduction 2
HTML 156: Project Oceanside Hotel and Sports Club Web Site 2
HTML 158: Plan Ahead Box (Critical Thinking): General Project Guidelines 3
HTML 159: Planning and Designing a Multipage Web Site 3
HTML 159: Creating Web Pages with Tables 3
HTML 164: Determining the Need for, Planning, and Coding a Table 4
HTML 168: Plan Ahead Box (Critical Thinking): Identify the Purpose of Various 5
Web Page Elements
HTML 169: Creating a Home Page with Banner Logo and Borderless Navigation 5
Table
HTML 179: External Style Sheets 6
HTML 181: Plan Ahead Box (Critical Thinking): Determine What Type of Style 7
Sheets or Other Formatting to Use in Your Web Pages
HTML 181: Adding an External Style Sheet 7
HTML 181: Plan Ahead Box (Critical Thinking): Create and Link an External Style 8
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 2 of 12

Sheet
HTML 190: Creating a Second Web Page 8
HTML 192: Plan Ahead Box (Critical Thinking): Determine What Styles Are Needed 8
for the Second Web Page
HTML 198: Adding a Link, Border Spacing, Padding, and Row Color 9
HTML 199: Plan Ahead Box (Critical Thinking) 9
HTML 201: Adding a Caption and Spanning Rows 9
HTML 203: Plan Ahead Box (Critical Thinking) 10
End of Chapter Material 10
Glossary of Key Terms 12

Chapter Objectives
Students will have mastered the material in Chapter Four when they can:
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 3 of 12

Define table elements Use the box-shadow property to alter the

Describe the steps used to plan, design, and
code a table
Create a borderless table for a horizontal
navigation bar with text links
Create an external style sheet to define
styles across a Web site
Utilize classes to give you more control over
styles
Link an external style sheet to Web pages
where you want its styles applied
Create a table with borders and insert text
appearance of an image
Alter the spacing between and within cells
using the border spacing and padding
properties
Utilize inline styles to alter the style of
individual elements on a Web page
Add background color to rows and cells
Insert a caption below a table
Create headings that span rows using the
rowspan attribute

HTML 156: Introduction

LECTURE NOTES
Review what students will learn about external (linked) style sheets and tables in this project

TEACHER TIP
Explain that tables are used to present information in a clear, concise way. While students will be
familiar with tables that contain numerical values, for example as an analogy, use spreadsheets
students will be less familiar with the use of tables in creating special HTML design effects.

CLASSROOM ACTIVITIES
1. Quick Quiz:
1)What are some of the properties and attributes of tables and paragraphs? (Answer: Borders, colors,
spacing, and adding a table caption)

HTML 156: Project Oceanside Hotel and Sports Club Web Site
LECTURE NOTES
Discuss the borderless table on the Web page in Figure 4-1a
Review the two borderless tables used on the other three Web pages in Figures 4-1b, 4-1c, and 4-1d
Discuss the relationship between the four pages and how they are linked to one another

FIGURES: 4-1a, 4-1b, 4-1c, 4-1d

HTML 158: Plan Ahead Box (Critical Thinking): General Project Guidelines
LECTURE NOTES
Review the general guidelines for students to keep in mind as they create a Web page

HTML 159: Planning and Designing a Multipage Web Site

LECTURE NOTES
Define external style sheet, reviewing the other kinds of style sheets (inline and embedded)
discussed in Chapters 2 and 3

TEACHER TIP
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 4 of 12

Explain to students that external style sheets are ideal when the style is applied to many pages. With an
external style sheet, students can change the look of an entire Web site with changes to one file. Each
page must link to the style sheet using the <link> tag. An external style sheet can be written in any text
editor, should not contain any html tags, and should be saved with a .css extension. Any number of
external style sheets can be associated with a document in HTML. The style sheet language defines how
multiple external style sheets interact (for example, the CSS "cascade" rules). Authors may specify a
number of mutually exclusive style sheets called alternate style sheets. Users may select their favorite
among these depending on their preferences. For instance, an author may specify one style sheet
designed for small screens and another for users with weak vision (e.g., large fonts). User agents should
allow users to select from alternate style sheets. The author may specify that one of the alternates is a
preferred style sheet. User agents should apply the author's preferred style sheet unless the user has
selected a different alternate.

CLASSROOM ACTIVITIES
1. Quick Quiz:
1)What is an external style sheet used for? (Answer: To define styles for multiple pages in a Web
site)

HTML 159: Creating Web Pages with Tables

LECTURE NOTES
Introduce tables as resources for organizing information on a Web page
Compare Figures 4-2a and 4-2b to show the range of complexity and formatting available with
tables
Use Figure 4-3 to show an image and text positioned in the table
Define all of the following: row, column, cell, heading cell, and data cell
Use Figures 4-4a, 4-4b, and 4-4c to review examples of all these elements within sample tables
Use Figures 4-5a, 4-5b, and 4-5c to review the application of styles to table elements
Define each of the following: table border, table header, and table caption
Use Figure 4-6 to discuss the table border, table heading, and table caption
Explain the function of the rules attribute in determining which internal borders to show in a table

FIGURES: 4-2a, 4-2b, 4-3, 4-4a, 4-4b, 4-4c, 4-5a, 4-5b, 4-5c, 4-6

BOXES
1. BTW: Tables. Discuss the uses to which Web page developers put tables on a Web page.

2. BTW: Table Elements. Encourage students to search the Web for HTML Table Elements or HTML
Table Properties in order to learn more about these concepts.

CLASSROOM ACTIVITIES
1. Group Activity: If possible, show students examples of pages that use text-wrapping to control the
positioning of text and images alongside versions of the same pages that use tables to provide more
control over the placement of the Web page elements.

LAB ACTIVITIES
1. Give students the task of finding two tables on different Web pages that feature heading and data
cells.
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 5 of 12

HTML 164: Determining the Need for, Planning, and Coding a Table
LECTURE NOTES
Review the three steps in the table-creation process
Discuss the circumstances in which a table should be used on a Web page
Compare and contrast the presentations of the information in Figures 4-7a and 4-7b and assess the
advantages offered by the table in Figure 4-7a
Discuss the utility of sketching out a table on paper before writing the HTML code
Discuss Figures 4-8a through 4-8c in conjunction with Figure 4-9 to illustrate the move from a
sketch of a table to its HTML implementation
Use Table 4-1 to review the four main HTML tags used to create tables, and discuss the use of each
of these tags in an HTML file in Figure 4-10a and in the resulting Web page in Figure 4-10b
Define the function of each of the following tags: <tr> and </tr>, <th> and </th>, and <td> and </td>
Use Table 4-2 to review the attributes for the table tags and their functions

FIGURES: 4-7a, 4-7b, 4-8a, 4-8b, 4-8c, 4-9, 4-10a, 4-10b

TABLES: 4-1, 4-2

BOXES
1. BTW: Table Tutorial. Encourage students to search the Web for tutorials that will step them through
the process of creating a table.

2. BTW: Table Borders. Encourage students to experiment with table borders in order to see firsthand
what does and does not work.

TEACHER TIP
Although the advantages of the use of tables in Web pages are numerous, caution students against
assuming that they must use a table for formatting the contents of their Web pages.

CLASSROOM ACTIVITIES
1. Group Activity: Provide students with types of different content and ask them to determine which of
these can benefit from the use of tables. Also, brainstorm with students other instances in which a table
might be more useful than a bulleted list, and vice versa.

2. Group Activity: Provide students with different content and ask them to sketch out tables that
correspond to the information to be presented.

3. Quick Quiz:
1)Which <table> </table> tags attribute defines space between a cells content and its border in
pixels? a) cellspacing b) border spacing c) alignment d) resolution (Answer: b)
2)Creating tables for a Web page is a three-step process. True or false? (Answer: True)

LAB ACTIVITIES
1. Assign students the task of finding one example of a poorly designed table and one example of a well-
designed table on the Web. As an alternative, find one well-designed table and one poorly designed
table on the Web, give students the URLs of each Web page, and give them the assignment of
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 6 of 12

comparing and contrasting the two tables.

2. Ask students to find examples of Web pages that implement some of the attributes listed in Table 4-2
(e.g., align, bgcolor, border, cellspacing, cellpadding, colspan, rowspan).

HTML 168: Plan Ahead Box (Critical Thinking): Identify the Purpose of Various Web
Page Elements
LECTURE NOTES
Review the formatting suggestions, including the decisions about whether to use borders, what
links are needed on a Web page, and what table formatting to use

HTML 169: Creating a Home Page with Banner Logo and Borderless Navigation Table
LECTURE NOTES
Review the content proposed for the home page of the Oceanside Hotel and Sports Club Web site
Review the steps to start Notepad++
Use Table 4-3 to review the HTML tags entered to define the structure of the site's home page
Review the steps to enter HTML tags to define the Web page structure, and use Figure 4-11 to show
the code entered in Notepad++
Review the steps to save an HTML file
Use Table 4-4 to review the box-shadow property and use Figures 4-12a through 4-12c to show the
box-shadow property examples
Use Figure 4-13 in conjunction with Table 4-5 to illustrate inserting and centering an image, and
styling it with a box-shadow
Use Figure 4-14 to review the image positioned in the home page with a borderless table, and to
show a horizontal menu bar with text links in place
Use Figure 4-15 in conjunction with Table 4-6 to illustrate creating a horizontal menu bar with
image links
Use Figure 4-16 in conjunction with Table 4-7 to illustrate adding paragraphs of text to the Web
page
Review the step to save the HTML file using Figure 4-17
Use Figure 4-18 to illustrate viewing the Web page, and review the steps to test the links on the
Web page

FIGURES: 4-11, 4-12a, 4-12b, 4-12c, 4-13, 4-14, 4-15, 4-16, 4-17, 4-18

TABLES: 4-3, 4-4, 4-5, 4-6, 4-7

TEACHER TIPS
If possible, demonstrate the importance of setting the width of <td> tags as a percentage by showing the
effect of resizing pages that use percentage widths and pages that use fixed/absolute widths.

Explain that menu bars, also known as navigation bars or nav bars, are important insofar as they give
Web page visitors the option of moving easily from one Web page to another without having to search
for links. The simplest early Web sites often depended on a basic link at the bottom of the Web page,
which stated, Click here for the next page, and a link to a list of table of contents hyperlinks, which
was a home page at the beginning of the Web site. As Web-page designers realized that their Web sites
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 7 of 12

did not need to duplicate the linear quality of a conventional book, however, some designers began to
use site maps, which were graphical representations of their Web sites material. The earliest Web
page visitors, however, used modems that downloaded images only very slowly; further, Web sites do
not always lend themselves to being mapped. Menu bars have solved the problem of loading quickly
and providing the sense of location that visitors want.

BOXES
1. BTW: Navigation. Discuss the research results about the usability of Web page navigation and
emphasize the need for, above all, options to be easy for users to locate.

CLASSROOM ACTIVITIES
1. Group Activity: Discuss with students experiences they have had with Web sites whose links failed,
and the impression that left in the students minds about that site.

2. Critical Thinking: If possible, demonstrate the importance of setting the width of the columns for the
pipe symbols to 1% by showing what happens when the columns are not set to 1% and all of the cells in
the table are spaced evenly. What would the menu bar look like that would result if you did not specify
1% as the WIDTH for the cell containing the | symbol?

LAB ACTIVITIES
1. Assign students the task of finding more information on the Web about the studies conducted to
assess the best location on a Web page for navigation bars and lists. Ask them to read one of the studies
and write a brief summary of the findings.

HTML 179: External Style Sheets

LECTURE NOTES
Explain the use of external style sheets for controlling the consistency and look of pages across a
Web site
Review the two steps in the process of creating an external style sheet and linking it to the relevant
Web pages
Compare the work required to propagate a change across a Web site that uses external style sheets
to the work required to change all of the styles individually inserted into multiple Web pages
across a site
Review the syntax of the <link /> tag

BOXES
1. BTW: Classes. Point out to students that classes are named with a period after the definition of the
element.

CLASSROOM ACTIVITIES
1. Critical Thinking: The most beneficial feature of the external style sheet is that you can easily change
the appearance of all Web pages into which the style sheet is linked just by changing the external style
sheet. What are some other beneficial features of external style sheets?

HTML 181: Plan Ahead Box (Critical Thinking): Determine What Type of Style Sheets
or Other Formatting to Use in Your Web Pages
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 8 of 12

LECTURE NOTES
Review the advice about determining what styles are shared across the Web pages and what styles
(or elements) will differ, and on what pages

HTML 181: Adding an External Style Sheet

LECTURE NOTES
Discuss the placement of styles in the body element
Use Figures 4-19 and 4-20 in conjunction with Table 4-8 to illustrate creating an external style sheet
Suggest to students the insertion of styles in order (body, paragraphs, links, and tables) in the
external style sheet, and review the syntax of the styles on page HTML 184
Use Figures 4-21 and 4-22 to show the externally defined styles in use
Review the syntax of the <link /> tag on page HTML 187
Use Figure 4-23 to illustrate linking to an external style sheet
Remind students of the importance of validating their HTML file to ensure that it meets current
standards, and review the steps to validate a Web page
Review the steps to print an HTML file and use Figure 4-24 to show the resulting printout of the
HTML file
Review the steps to view, test, and print a Web page, and use Figure 4-25 to show the resulting
printout of the Web page

FIGURES: 4-19, 4-20, 4-21, 4-22, 4-23, 4-24, 4-25

TABLE: 4-8

TEACHER TIP
Stress the importance of viewing the completed Web page and testing its links. It is very easy for a
typographical error or a forgotten closing HTML tag to have an unexpected result on your Web page
when it ultimately is viewed in a browser. It is a good idea to view and test completed pages in Firefox,
Internet Explorer, Chrome, and Safari to make sure that there are no unexpected effects in either
browser. Emphasize the importance of testing the links on a newly created page, especially links to sites
on other servers over which you do not have control.

BOXES
1. BTW: Adding Comments. Discuss the use of the comment tags to add information to your code.

2. BTW: Colors. Discuss the use of the eyedropper tool in an image editing software application like
Photoshop to determine the precise color in an image.

3. BTW: External Style Sheet Validator: Refer students to the CSS validator available from the w3.org
validation service.

HTML 181: Plan Ahead Box (Critical Thinking): Create and Link an External Style
Sheet
LECTURE NOTES
Remind students that the external style sheet is the most powerful and lowest precedence style
sheet, and what the implications of that precedence are
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 9 of 12

HTML 190: Creating a Second Web Page

LECTURE NOTES
Use Figure 4-26 to show the horizontal menu bar of text links that serves on each of the second-
level pages to connect those pages to the rest of the site
Review the steps to copy and paste HTML code to a new file, and use Figure 4-27 to show the
HTML code for the new file
Compare and contrast the tables in Figures 4-28a and 4-28b
Use Table 4-9 to review the HTML tags and text used to create the table with borders and insert
text into cells, and use Figure 4-29 to show the code entered in Notepad++
Review the steps to save, validate, view, and print a Web page and use Figures 4-30 and 4-31 to
show the resulting printouts
Use Figures 4-32a and 4-32b to illustrate testing the links on the Web page

FIGURES: 4-26, 4-27, 4-28a, 4-28b, 4-29, 4-30, 4-31, 4-32a, 4-32b

TABLE: 4-9

CLASSROOM ACTIVITIES
1. Class Discussion: Show students a variety of tables with and without borders and discuss with them
which ones are effective as they are, and which ones need to have borders added/removed.

LAB ACTIVITIES
1. Give students the task of finding two or three instances of tables on Web pages that either have
borders and should not, or that do not have borders and should.

HTML 192: Plan Ahead Box (Critical Thinking): Determine What Styles Are Needed
for the Second Web Page
LECTURE NOTES
Remind students of the ways in which they can override the styles in an external style sheet (e.g.,
formatting attribute, inline style, embedded style sheet)

HTML 198: Adding a Link, Border Spacing, Padding, and Row Color
LECTURE NOTES
Define border spacing and padding, and use Figures 4-33a and 4-33b to illustrate the use of the
corresponding properties attribute to affect a tables appearance
Review the step to open an HTML file, and use Figure 4-34 to display the HTML file opened in
Notepad
Review the steps to link to an external style sheet
Use Figure 4-35 to illustrate adding border spacing, padding, and row color to a table
Review the steps to save, validate, print, and view the HTML file and print the Web page

FIGURES: 4-33a, 4-33b, 4-34, 4-35

HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 10 of 12

CLASSROOM ACTIVITIES
1. Quick Quiz:
1)What does border spacing specify? (Answer: The distance between the borders of adjacent cells in
a table)

2. Critical Thinking: Under what circumstances are border spacing and padding not useful properties to
apply to a table?

LAB ACTIVITIES
1. Give students a code snippet and the opportunity to experiment with the border spacing and padding
properties, using extreme values with each property to demonstrate the effect of each on the rendering
of the table.

HTML 199: Plan Ahead Box (Critical Thinking)

LECTURE NOTES
Review with students how to determine when to use (or not use) border spacing and padding

HTML 201: Adding a Caption and Spanning Rows

LECTURE NOTES
Explain the function of the rowspan and colspan attributes
Compare and contrast Figures 4-36 and 4-37 to show the Web page as it is saved and how it will
appear after the rowspan attribute is in place
Use Figure 4-38 to show a table design sketched to include spanned rows
Review the steps to open an HTML file, and link the external style sheet
Discuss the syntax for adding a caption to a table, and review both of the attributes used to place
captions in relation to the table
Use Figure 4-39 to illustrate adding a table caption and use Figures 4-40 and 4-41 to illustrate
creating the headings that span rows
Use Figure 4-42 to illustrate adding the bolder class to data cells
Review the steps to save, validate, and print the HTML file, and the steps to view and print the Web
page using Figure 4-43
Review the steps to quit Notepad++ and a browser

FIGURES: 4-36, 4-37, 4-38, 4-39, 4-40, 4-41, 4-42, 4-43

BOXES
1. BTW: Row and Column Spanning. Refer students to the Web for more information about row and
column spanning.

CLASSROOM ACTIVITIES
1. Class Discussion: Provide students with different content that requires the use of spanning rows and
columns and ask them to sketch out tables that correspond to the information to be presented.

2. Quick Quiz:
1)What does the rowspan attribute of the <td> or <th> tag do? (Answer: It sets the number of rows
spanned by a cell.)
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 11 of 12

3. Critical Thinking: Are there particular kinds of uses of tables that lend themselves more readily than
others to the spanning of rows and/or columns?

LAB ACTIVITIES
1. Ask students to find two or three examples of tables on Web pages that utilize the colspan and
rowspan attributes.

HTML 203: Plan Ahead Box (Critical Thinking)

LECTURE NOTES
Review the formatting choices to make as you prepare a table for a Web page, including captions,
row and column spanning, and colored backgrounds

End of Chapter Material

Chapter Summary provides a general survey of the material in the chapter. Students can use these
pages to reinforce their achievement of the chapter objectives.

Learn It Online exercises ask students to visit the Online Companion that offers additional
information, resources, and activities related to the topics presented in the chapter.

The Apply Your Knowledge section includes short exercises and review questions that reinforce
concepts and provide opportunities to practice skills.

Extend Your Knowledge exercises allow students to expand their knowledge by solving practical
problems and experimenting with new skills, using Help.

In the Make It Right exercises, students take the necessary steps to correct all the errors in a
document and/or improve its design.

The In the Lab activities solidify the concepts presented in the chapter with practical application.

Thought-provoking Cases and Places exercises in each chapter exercise students minds and
challenge them to construct creative solutions. These exercises are constructed to allow students to
work independently and collaboratively.

Glossary of Key Terms

border spacing (HTML 198)
cell (HTML 161)
colspan attribute (HTML 201)
column (HTML 161)
data cell (HTML 161)
external style sheet (HTML 159)
heading cell (HTML 161)
padding (HTML 198)
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 12 of 12

row (HTML 161)

rowspan attribute (HTML 201)
table border (HTML 163)
table caption (HTML 163)
table header (HTML 163)
tables (HTML 159)
<td> and </td> (HTML 166)
<th> and </th> (HTML 166)
<tr> and </tr> (HTML 166)

Top of Document