Tables - Web Development and Design Foundations with XHTML - page 331

● The background color on the table cell that contains the main navigation is set to
#5c743d .
● The summary table attribute is set to the value "" since the table configures the
page layout.
Move the page contents into the table as indicated below:
● Replace This is the banner area with the logo image trilliumbanner.jpg.
● Replace Place navigation here with the div that contains the navigation
images.
● Replace Page content goes here with the remaining code for the page. After
making these modifications, save the newindex.html page and test it in a browser.
Your page should look similar to the one shown in Figure 8.25. Compare your
work to the sample in the student files (Chapter8/8.3/index.html).
Are you surprised at the way the content of the Web page was transformed just by using
a table page layout and some color? While configuring page layout using CSS is a more
modern and preferred method, some current Web sites are designed with table-based
page layouts. Later on in the chapter you'll explore using CSS to configure properties of
XHTML tables. In the next section, you'll get some practice coding nested tables.
Nested Tables
Recall that tables have two common uses on Web pages—to organize information and
to format the page layout. Figure 8.26 shows a Web page that uses two tables—the
school history table used in Figure 8.18 and the page layout table from Figure 8.19.
The technique used to nest a table within another is to place the interior table within a
table cell ( <td> ) of the exterior table. Sample code for this type of table nesting follows.
Examine the source code of the Web page shown in Figure 8.26 in the student files
(Chapter8/tables/table4.html).
Figure 8.26
The school history
table is nested
inside the page
layout table