8.2 XHTML—Table Page Layout^331●The background color on the table cell that contains the main navigation is set to
#5c743d.
●Thesummarytable attribute is set to the value ""since the table configures the
page layout.Move the page contents into the table as indicated below:
●ReplaceThis is the banner areawith the logo image trilliumbanner.jpg.
●ReplacePlace navigation herewith the divthat contains the navigation
images.
●ReplacePage content goes herewith 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