Chapter 5 - Creating Page Templates

HTML table elements allow Web designers to create grid-based layouts. You can use tables to create templates and to solve design problems. This chapter explains how to create templates by manipulating the most commonly used table elements and attributes. Creating and using templates gives you more control over how content displays in the browser while building more visually interesting pages.

When you complete this chapter, you will be able to:

Table Examples

These are the HTML files for the various figures in Chapter 5. You can view these in your browser and save the code to experiment with tables.

Figure 5-1: Tabular Data
Figure 5-2: Basic Table
Figure 5-3: Table with caption and header
Figure 5-4: Table with column span
Figure 5-5: Table with row span
Figs. 5-6, 5-7: Flexible Table
Figure 5-8: Fixed Table
Figure 5-10: Cell padding
Figure 5-11: Cell spacing
Figure 5-16: Centered Table
Figure 5-17: Stacking Tables
Figure 5-18: Nested Table
Figure 5-32: 2-Column Table Template
Figure 5-33: 2-Column with Banner Template
Figure 5-34: 3-Column Table Template
Figure 5-35: 3-Column with Banner
Figure 5-36: 3-Column with Sections Template
Figure 5-37: Column Main Sectioned Template

Exercise File

Download the file template.htm to work on the "Creating a Page Template" project starting on page 141 (3rd Ed.).

Case Project

Design the page templates for the different information levels of your Web site. Create sketches for each template, and describe why the templates fit your content.

You will find all of the page templates shown in this chapter on the Companion Web site. Use these templates as starting points for your Web pages. Adapt the page templates to your own needs or build your page templates from scratch.Test the page templates with content in different browsers to make sure that they are displayed properly.

Once your templates test properly, start to build the files for your Web site by copying the templates to individual files and naming them to match your flowchart from Chapter 3.

Top