• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Nesting Tables

A nested table is one that is placed within the cell of another table. Nested tables are used for a variety of purposes. In the earlier days of the Web, nesting tables was usually considered a bad practice because of the problems it caused (including sometimes crashing a viewer's browser). These days, however, browsers are capable of a great deal more. Nested tables are commonly used to create pages that would otherwise have to use one incredibly complicated table or not be able to use the intended design at all. Nesting tables allows you to create more complex layouts and keep each of your tables as simple as possible. The more complex a single table is, the harder it is to create and the more likely it will be to break.

1.
In the lighthouse.html document, click outside of the table and press Return (Macintosh) or Enter (Windows) several times. Create a new table with the following settings: 3 rows, 1 column, 93 pixels wide, 0 Cell Padding, 0 Cell Spacing, and 0 Border.

It is often easier to put together the table you plan to nest by creating it outside the larger table, because you will be able to clearly see the borders of the smaller table while you are inserting the necessary images and content.

2.
Place the insertion point in the first row, and then click the image icon on the Insert bar to insert nav_main.gif into the cell. In the second row, insert nav_introduction.gif. In the third row, insert nav_credits.gif.

Your small table should now look like the following example.

As you insert images, if your tables contain images that line up flush with one another as they do in this small table, you may not be able to see the dotted lines separating the individual cells.

NOTE

As you work with tables, keep in mind that the dotted lines, which Dreamweaver uses to indicate the cell and table borders, each take up 1 pixel of space. Those extra pixels of space created by the dotted lines do not exist when the document is seen in a browser. However, those pixels of space may cause tables viewed within Dreamweaver to look larger than they really are. For example, in a document you might have two tables. The first table may have five columns and the second table may have only one column. The first table would appear in Dreamweaver to be 4 pixels wider than the first, even though if you were to view the page in a browser both tables would be the same width. You can always turn off table borders by choosing View > Visual Aids > Table borders. On the other hand, table borders are generally very useful and it can be very difficult to work with tables when you have them turned off.

3.
Select and copy the small table with the main, introduction, and credits images you just created. In the table at the top of the page, place the insertion point in the third column of the first row and use Edit > Paste to insert into the cell the table you just copied.

The smaller table is now nested into the cell in the third column of the first row of the first table. In this exercise, you have nested a table in order to simplify the layout of the large table. You can now delete the original small table at the bottom of the page.

TIP

You can use Edit > Cut instead of Edit > Copy to copy and delete the small table at the same time.

Try to avoid nesting tables more than four or five levels deep. Keep in mind that older browsers—particularly versions of Netscape—may have difficulty displaying too many levels of nested tables (sometimes due to the increased memory required to display those nested tables). In order to determine whether the nested tables you create will work correctly for your visitors, you need to test your pages in a variety of browsers on different platforms.

Don't get in the habit of creating extraneous nested tables. Nesting is a good technique that can be used to achieve cohesive, advanced layouts, but it should be done in a carefully considered and purposeful manner. If you find yourself nesting many levels of tables, you should probably rethink your layout. A simpler layout means less code is created, making it more likely that the page will download quickly, and there will be less potential for problems. If you end up with an improper display in a browser, multiple levels of nested tables can also make it more difficult to find the cause of those errors in the code.

4.
Click at the bottom of the page outside the existing table and press Return (Macintosh) or Enter (Windows) several times. Create a new table with 1 row, 5 columns, 465 pixels wide, 0 Cell Padding, 0 Cell Spacing, and 0 Border.

You are creating a second table to nest inside the larger table.

5.
In the first column, insert nav_history.gif. Select the nav_history.gif image, and press the right arrow key twice to move off of the image and into the second column. In the second column, insert nav_technology.gif. Select the nav_technology.gif image, and press the right arrow key twice to move off of the image and into the third column. In the third column, insert nav_lights.gif. Select the nav_lights.gif image, and press the right arrow key twice to move off of the image and into the fourth column. In the fourth column, insert nav_resources.gif. Select the nav_resources.gif image, and press the right arrow key twice to move off of the image and into the fifth column. In the fifth column, insert nav_culture.gif.

All images are located in the Images folder.

Your table should now look like the following example.

6.
Select and copy the small table with the five images you just inserted. Place the insertion point in the second column of the third row of the table at the top of the page and use Edit > Paste to insert the table you just copied into the cell.

The table is now nested into the cell in the second column of the second row of the first table. You can now delete the smaller table at the bottom of your document.

In this exercise, you have nested tables that have content of fixed widths—that content is the images you have placed in the table cells. In the last table you created, the combination of the widths of the five images equals the width of that table. In a table such as this, if you were to replace one or more of those images with text typed directly into the cells (HTML text as opposed to a graphic), there would no longer be an object of a fixed width in those cells. You could define the widths of all five cells, but that often will not hold the cells to their defined dimensions. One technique to force cells to hold their dimensions is to create an additional row at the top of the table with spacer images in each cell. You would set the height of the spacer images in each cell to 1 pixel and set the width of each spacer image to the desired measurement. The combined widths of all five spacer images should equal the width of the table itself. Graphic programs such as Adobe ImageReady and Macromedia Fireworks often use spacer images in this manner when generating HTML for tables according to how an image has been sliced.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint