Overview

Tables in general are used for Web page layout very frequently, and will continue to be used until element positioning with Cascading Style Sheets (CSS) is better supported by the browsers.

Nested tables are used to achieve finer control over layout and positioning. What are nested tables? Tables inside of other tables.

The diagram at right illustrates the concept of nesting tables. Each colored box represents a different table; four are shown here.

In theory, you can put an unlimited number of tables inside tables inside tables... In practice, browsers run out of memory and lose track of the details of tables, so the practical limit is three or four nested tables.

Advantages and Disadvantages

Given that nested tables are used so widely for layout, you'd probably guess that the advantages outweigh the disadvantages - and of course you'd be right!

So let's look at the advantages first:

• Tables can be controlled quite precisely, even down to the single-pixel level;
• Browsers handle tables pretty consistently;
• By nesting tables, you can code just about any design you can imagine (as long as it's a combination of rectangles);
• The fact that they're widely used means they're widely understood, making maintenance less of a problem;
• In many cases, there's really no alternative.

Of course, there are always disadvantages:

• Nesting multiple tables can mean complex coding, because HTML is essentially one-dimensional while screen-space is two-dimensional - as designers, we have to do the translation;
• Table elements are all rectangular, and Web designers don't always like feeling boxed in (there are ways around this, including software support);
• Nested tables slow down browsers - the more deeply nested, the slower they get, and may even cause some browsers to lose track of elements and attributes;
• Table nesting can also increase file size;
• Tables used for layout can confuse the text-reader software used by disabled people, making them less accessible; one solution to this problem is software enabling designers to visualize the table as a text-reader would. Temple University provides The Wave software at no cost to do this: http://www.temple.edu/inst_disabilities/piat/wave/

Activity

Below you'll find a list of Websites to look at. Go to each one and examine the HTML code (for the home page only), using your browser's View > Source or View > Page Source menu commands. Hint: Use the Search feature to look for table.

Answer these questions for each one:

1. Does the page have one, or more than one table for page layout?
2. Are there tables nested inside each other, and if so, how deeply?
3. How many columns are set up in each table?
4. What visual techniques are used to make different areas of the page look separate? (Borders? Images? Colors? Empty space?)
5. What are the different page areas used for?

Websites to Examine:

1. The Italian Futurist Book: http://www.colophon.com/gallery/futurism/index.html
2. Aero Tec Laboratories: http://www.atlinc.com/fuelcell.htm
3. Ann Arbor District Library: http://www.aadl.org/
4. Java 3-D API: http://java.sun.com/products/java-media/3D/
5. Wargame.com: http://www.wargame.com/
6. Exotic Pet Vet Net: http://www.exoticpetvet.net/
7. Kids Gardening: http://www.kidsgardening.com/
8. Say Hello to the World: http://www.ipl.org/div/kidspace/hello/
9. CNN: http://www.cnn.com/
10. Daily Funnies: http://www.comedy-zone.net/cartoons/funnies.htm
11. Secrets of the Ice: http://www.secretsoftheice.org/explore/index.html
12. Russian Space Web (may need to open in WordPad rather than Notepad): http://www.russianspaceweb.com/
13. PC World: http://www.pcworld.com/reviews/top100/index/0,00.asp
14. Juneteenth World Wide Celebration: http://www.juneteenth.com/
15. International Korfball Federation: http://www.ikf.org/

Your Instructor may ask you to:

• Discuss your findings in class ; or
• Turn in a written evaluation of one or more of these pages; or
• Discuss and write up your evaluation.

Audience: This is for people who know about creating HTML tables, and want to explore the ways tables are used for page layout.
Objectives: When you successfully complete this lesson, you will be able to...

1. Discuss how tables are helpful in controlling page layout;
2. Define "nested tables"
3. Discuss advantages and disadvantages of using nested tables to lay out Web pages
4. List at least three professionally-developed Websites that use tables;
5. Identify the table code used in professional Websites for page layout.

About this document...
Module W24d: This document is part of a modular instruction series in computer technology. For more information, see the overview or the list of modules in this series, W: World Wide Web. This document has been used in the following classes: INP 150.

Author: Laurence J. Krieg
Institution: Internet Professional Department, Washtenaw Community College
History: Original: November 2002; This revision posted  Monday, 31-Aug-2009 11:48:06 EDT
Copyright © 2002, Laurence J. Krieg, Washtenaw Community College

Instructors: You are welcome to point to this file in your Web-based materials.
Students: you may make a copy for your personal use.
All other uses: contact the author, Laurence J. Krieg for permission.