8.2 XHTML—Table Page Layout^325CHECKPOINT 8.1
- Describe two reasons to use tables on a Web page.
2. Describe the difference between the cellpaddingand cellspacingtable attributes. - Describe one coding technique that increases the accessibility of an XHTML table.
8.2XHTML—Table Page Layout
You may be wondering about the title of this section because you’ve been configuring
page layout using CSS. While CSS page layoutconfiguration is a more modern and pre-
ferred method, some current Web sites are still designed with table-based page layouts.
You’ll explore this coding technique in this section. Let’s take a look at some well-known
sites that at the time this was written use tables to format their Web pages—
http://www.yankeecandle.com, http://www.league.org, and http://www.craigslist.org. As
you surf the Web and analyze these and other sites, look for a Web page layout that
appeals to you. View the source code by selecting View, Source from the browser menu
bar (for IE7+select Page, View Source). Examine how the page was formatted. You will
find that many of the pages use tables. It is important not to copy a page, but rather to
get ideas from many sources and organize them in a fresh, new way that is all your own.
When designing a new Web page, it’s a good idea to sketch your ideas on paper first.
Figure 8.19 shows a sketch of a common format consisting of a horizontal banner and
three columns. Notice that the middle cell in the second row is used for spacing pur-
poses only—to separate the navigation area from the content area. Sample XHTML
code for this type of table layout follows:
<table border="0" width="80%">
<tr>
<td colspan="3"><h1>This is the banner area</h1></td>
</tr>
<tr>
<td width="20%" valign="top">Place Navigation here</td>
<td width="10"> </td>
<td>Page content goes here</td>
</tr>
</table>Figure 8.19
Using a table to
format a Web page
A Web page using this type of table layout is shown in Figure 8.20 and can be found in
the student files (Chapter8/tables/table1.html).