Building Multi-Column Layouts with Tables

Web pages very commonly use tables to create multi-column layouts. The "traditional" organization of a Web page is to place a navigation bar at the left or top and the main content to the right or below. Figure 24.15 shows an example of the left/right layout, and Figure 24.16 shows an example of the top/bottom one.

Figure 24.15. A Web page that uses a table to create a left-right layout with links to other pages at the left.

graphics/24fig15.jpg

Figure 24.16. A Web page that uses a table to create a top-bottom layout with links to other pages at the top.

graphics/24fig16.jpg

We won't go into table creation and usage here because Chapter 12, "Structuring and Organizing Information with Tables," covers the topic thoroughly. We will, however, explain in a big-picture way how to create a page like the ones in Figure 24.15 and Figure 24.16:

  1. Start a new Web page and create a table. Size the table rows and columns as appropriate. To make a cell taller, click inside it and press Enter a few times.

    For example, you might want a large column at the right and a thinner one to the left that will hold navigation hyperlinks.

  2. If you want any of the cells to have a colored background, click the cell and choose Format, Borders and Shading. On the Shading tab, select the desired color or shading, and then in the Apply To section, open the drop-down list and choose Cell. (See Figure 24.17.) Click OK when done.

    Figure 24.17. Apply shading to an individual cell if desired.

    graphics/24fig17.gif

  3. Remove the borders from around all sides of the table. (With the table selected, open the Borders drop-down list on the Formatting toolbar and choose No Border.)

  4. Type or insert hyperlinks in the cell that you have decided will function as your navigation bar. If you want to hyperlink to other pages you have not created yet, decide what you will name them and then go ahead and create the hyperlinks for them.

    NOTE

    In the navigation bar cell, include a hyperlink to this page that you are on. Clicking it will do nothing, so it's okay to have it. The reason: You will probably copy this page and then edit the copy when you create the other pages in the Web site, and having the link to this page already in place will prevent your having to create it on each page later.

  5. Type or insert the text for the main body of the page in the cell that will function in that capacity.

  6. Save the page.

  7. Save it again under a different name?one of the names you chose for the hyperlinks in the navigation bar.

  8. Delete the main body content and enter the content for the new page. The navigation links should be able to remain the same.

  9. Repeat until you have created all the pages for your site.



    Part I: Word Basics: Get Productive Fast
    Part II: Building Slicker Documents Faster
    Part III: The Visual Word: Making Documents Look Great
    Part IV: Industrial-Strength Document Production Techniques
    Part VI: The Corporate Word