Create the inner table and any text or other elements that should accompany it.
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.
Test both tables separately to make sure they look the way you want them to.
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.
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.
Use comments to identify the different parts of a layout.
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.