l3

Separate Tables at a glance

Site Genre: Pattern Group l

magnify imageFigure L3.1 This example from the People for the Ethical Treatment of Animals (PETA) site shows separate tables in action. In the background is what a customer sees while the Web page is loading. Note that the logo and some navigation elements are already displayed. In the foreground is what the customer sees after the page has finished loading.

Background

This pattern describes ways of simplifying tables and dividing them into smaller tables to make them display faster in Web browsers. The pattern can be applied to speed up older Web sites that still make use of HTML tables for layout. Use this pattern alone or in conjunction with other patterns for making fast-loading Web pages, such as LOW NUMBER OF FILES (L1), FAST-LOADING IMAGES (L2), HTML POWER (L4), REUSABLE IMAGES (L5), and FAST-LOADING CONTENT (L6).

Close

PROBLEM

Web pages with long, complex HTML tables take a long time to be displayed in Web browsers.

buy the book to find out more

SOLUTION

magnify image Figure L3.3 Use separate tables so that the top portion of the page can load first. Put important navigation elements and content in the first table so that people will see them first, while the rest of the page is loading.

For older Web sites that use HTML tables for layout, split large tables into completely separate, smaller tables so that each one can be loaded and displayed independently.

Other Patterns to Consider

For newer Web sites, consider using STYLE SHEETS (D11) to specify page layout. For older Web sites, use separate tables when implementing a GRID LAYOUT (I1) in HTML. In some cases, separating the tables or moving things out of them may make it harder to implement a clear grid. Decide what will go into the table at the top. Some things to consider include a CLEAR FIRST READ (I3) and NAVIGATION BARS (K2).

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.