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 (sometimes crashing a viewer's browser, for example). These days, however, browsers are capable of a great deal more. Nested tables are commonly used to create pages that 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 or have other viewing problems in browsers.

1.	In the yoga-table.html document, click outside the table you created in the previous exercise and press Return (Macintosh) or Enter (Windows). Create a new table with the following properties: 2 rows, 1 column, 176 pixels wide, 0 Border, 0 Cell padding, and 0 Cell spacing. Set the Header option to None, leave the Caption text field blank, and type Schedule of Classes in the Summary text field. Click OK. It is often easier to put together the table you plan to nest by creating it outside the larger table because you can clearly see the borders of the smaller table while you are inserting the necessary images and content, and you don't accidentally click in the larger table as you're trying to work with the smaller one.
2.	Place the insertion point in the second row and type Schedule. Your small table should now look like the following example.
3.	Press Tab to add a row below the last one. Click the Split Cell into Rows or Columns button on the Property inspector, choose Rows from the Split Cell Into section, and type 7 into the Number Of Rows text field. You have prepared the table and are now ready to insert the content into the cell you just split.
4.	Using the short-schedule.txt document from the Text folder, copy and paste the text using one row for each day. Tip There are a variety of ways to approach tasks such as this within Dreamweaver, and the method you choose will depend on circumstances such as how the data is formatted. For example, another way to import the text is to save the .txt file as a delimited file and import it as a table. You can then copy and paste the cells to replace those in the current table, or modify the imported table to match the one you are creating in this exercise. Each row represents one day. Your table should now look like the following example.
5.	Select the table you've been working with containing the class schedule table and choose Edit > Cut. Place the insertion point into the cell located in the fourth column and fourth row of the table that you created in the previous exercise and choose Edit > Paste.

Your document should now look like the following example.

The smaller table is now nested into the first table. In this exercise, you have nested a table to simplify the layout of the large table.

Try to avoid nesting tables more than five or six levels deep. Keep in mind that older browsersespecially older versions of Netscapemight have difficulty displaying too many levels of nested tables (sometimes due to the increased memory required to display those nested tables). 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 that less code is created, which makes 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.