Using Tables in Design

Without the use of some form of design layout, site content runs from the left to the right of the screen without anyone having control over layout capabilities. In Figure 10.1, a paragraph and piece of clip art are simply placed on the page. In Figure 10.2, the same content is placed in a table to provide a more attractive design.

Figure 10.1. A paragraph of text and a piece of clip art are placed on a Web page without the use of tables.

Figure 10.2. The same content shown in Figure 10.1 is placed inside a two-celled table to provide a cleaner layout.

Layout tables and cells provide additional layout design capabilities, as can be seen in Figure 10.3 where the content from Figure 10.2 is formatted with a layout table with some additional flourishes.

Figure 10.3. The content shown in Figure 10.2 is instead placed in a layout table with a few additional flourishes such as a colored border on the corners.

On the most basic level, tables are used to contain content as was seen in the previous figures. Tables and cells can be placed as deep as desired within tables and cells to provide the layout effect the developer is looking for. In Figure 10.4, an almost desktop publishing effect is produced by placing tables within tables.

Figure 10.4. The page content shown here is a traditional 770 pixel table with a number of sub tables and cells within.

The use of tables in Web design does not automatically mean that site content is accessible. To learn more about this issue and see how FrontPage can assist in designing a truly accessible site, see "FrontPage's Accessibility Features," p. 235.

If you are having problems making your tables print correctly, see "Tables Don't Print" in the "Troubleshooting" section at the end of this chapter.