JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Combining Tables

For more complex layouts, you may wish to combine tables. You can place combinations of tables and text in another table or you can use multiple tables.

To nest one table in another:

1.
Create the inner table and any text or other elements that should accompany it.

2.
Create the outer table. Determine which cell of the outer table will hold the inner table and type placeholder (or some other easily identifiable text) there as a placeholder.

3.
Test both tables separately to make sure they look the way you want them to.

4.
Replace the word placeholder with the inner table content by copying and pasting (Figure 16.26).

Figure 16.26. Here I've created an outer table with a single row. The left column is devoted to a navigation bar and the right column contains the main content (what we've worked on so far in this chapterwhich contains its own wrapped table).


The more complicated your tables become, the longer it will take for a browser to calculate their proper widths and display them. One way to simplify your code is to divide your layout into multiple tables that sit one on top of the next.

Figure 16.27. Here I've combined the main content with the left navigation by placing them in a table in separate cells. I've added the border so you can see what's happening.

[View full size image]


To use multiple tables:

1.
Create the second table directly after the closing </table> of the first (Figure 16.28)

Figure 16.28. Instead of creating a new table to combine the logo bar and the table from Figure 16.27, the code will be cleaner, leaner, and faster if I create two independent tables.


2.
Use comments to identify the different parts of a layout.

3.
Make sure the widths of the separate tables (and of the corresponding columns in each) match (Figure 16.29).



Figure 16.29. I use CSS to match the width of the left column in the lower table with the width of the left column in the upper table.


Tips

  • Creating the tables separately before combining them helps pinpoint where problems may lie, should they occur.

    Figure 16.30. The new table sits right above the old one. Since the first columns have the same width, they look like part of the same layout.

    [View full size image]

  • Only nest tables where it's absolutely necessary. They can slow down a browser considerably or even make it crash. Whenever possible, use multiple tables as an alternative.

  • Use &nbsp; in any cell that should remain empty. Otherwise, it may not display at all.

  • Use background colors (see pages 172 and 240) during testing to decipher which cells belong to which tables. You can use borders for this job as well, but the width of the borders can throw the columns out of alignment.

  • Make sure to close each table with its own closing </table> tag.

  • You can make a column wider than its contents by setting the CSS width property for that column. Otherwise, browsers will try to make the column as narrow as the contents will allow.

  • An old-fashioned way of making a column wider than its contents was to insert a transparent spacer GIF and set its width to the desired width of the column. It's frowned upon these days.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→