HTML and CSS Reference
In-Depth Information
4
Creating Tables in a Web
Site Using an External
Style Sheet
Introduction
So far, you have learned how to make a basic Web page and how to link one Web page to
another, both within the same Web site and external to the Web site. You also learned how
to create inline styles and embedded (internal) style sheets to alter the appearance of Web
page elements. In this chapter's project, you will create an external (linked) style sheet to
set the style for elements across multiple Web pages. The project adds to your HTML
knowledge by teaching you how to organize and present information on a Web page using
tables with rows and columns. In this chapter, you will learn about the elements used in a
table and how to plan, design, and code a table. You will learn how to use a table to create a
horizontal navigation bar with image links, and to create tables to organize text and images.
You will enhance the Web site by manipulating the properties and attributes of tables and
paragraphs, altering borders, colors, and spacing, and adding a table caption. You will use
the new CSS3 box-shadow property to give a unique look to the banner image.
Project — Oceanside Hotel and Sports Club Web Site
Having a reliable Web site makes it easier for a company's customers to find the establishment,
provides a way to communicate the company's brand, and allows the company to provide
additional services. As advertising director for Oceanside Hotel and Sports Club, you want
to enhance Oceanside's Web site to increase the hotel's exposure to current and new cus-
tomers and to incorporate ideas gathered from customer feedback surveys. The new site
will allow customers to browse through tables of information that outline the golf, tennis,
and dining options offered by the hotel and sports club.
As shown in Figure 4-1a, the Oceanside Hotel and Sports Club home page includes
a company logo banner and a borderless table that contains a navigation bar under the
logo. The borderless table gives users easy access to all pages in the Web site. This table
is available on every Web page in the Web site. The Golf, Tennis, and Dining Web pages
(Figures 4-1b, 4-1c, and 4-1d) each include the company logo banner and the same bor-
derless table at the top, as well as one table with borders that displays the contents of that
particular Web page. In this project, you will create the oceanside.html and golf.html Web
pages. You will edit the tennis.html Web page (Figure 4-1c) to add border spacing and
padding properties, thereby adjusting the spacing between cells. The dining.html Web
page file (Figure 4-1d) is also edited to add a caption with information about the table and
to use the rowspan attribute to create headings that span several rows.
As you read through this chapter and work on the project, you will learn how to
plan, design, and code tables to create a user-friendly Web site. You also will learn to
format tables and to combine table features to make the pages more readable. In addition,
you will learn to create a navigation bar with image links.
HTML 156
