Web Resume Project

Create Multiple Tables

The following is an example of how tables are stacked on a page and nested within another table cell.

Table 2 (green, menu and content) is stacked below Table 1 (red, heading), and Table 2 has Table 3 (blue, menu) nested inside the left column cell; Tables 4 (purple, first résumé element) and 5 (orange, second résumé element) are nested inside the right column cell of Table 2. Table 4 is stacked above Table 5. The vertical alignment of the left column of Table 2 is set to "top" so that Table 3 stays at the top of the column as the right column of Table 2 gets longer with additional table elements stacked inside it. Note the first row of Table 5 has the two columns merged to yield one cell spanning the entire table. Additional tables will be stacked below Table 5 for subsequent résumé elements.

A good habit for table creation is to use table widths in pixels rather than percent. The technique keeps everything constant and fixed in exactly the place you want it regardless of the viewer's browser configuration. A good guideline is to use a maximum table width of 600 pixels in order to preclude a user with a 640 pixel-wide screen presentation from having to use the horizontal scroll bar. Nested tables will have a pixel width equal to the cell width in which they are placed. In the example above, the tables have the following widths:

Table 1 = 600 pixels (heading table)
Table 2 = 600 pixels (table to hold menu and content)
Table 3 = 135 pixels (nested in Table 2, left column)
Table 4 = 465 pixels (nested in Table 2, right column)
Table 5 = 465 pixels (nested in Table 2, right column)

None of the tables have visible borders; although, in the HTML editing mode, the table and cell boundaries are indicated by dotted lines.