you viewed the page in a browser, you may not have been happy with the overall layout and the shifting that occurred in the layout when the browser was resized. As was the case in index.htm, we can remedy the situation by adding a table to control the structure of images and text for the employees in our fictitious company. We'll begin by drawing new tables in Layout mode. To draw tables, follow these steps: 1. We don't want to just randomly draw a table on the page. Instead we'll want to enable our rulers so that we can create a table with a precise width and height from the onset. To show your rulers, choose View, Rulers, Show or press Ctrl+Alt+R (in Windows) or Contrl+Option+R (on the Mac). 2. With your rulers now visible, we can use the new guides feature in Dreamweaver 8 to initially create the structure of the companydirectory.htm page. This features allows us to draw layout tables that snap to the preset width and height of the guides. To create the guides, click, hold, and drag out of the rulers until you've created a guide structure that mocks Figure 6.35. Notice that guides are set horizontally at 177, 222, and 322 pixels, and vertically at 640 pixels. Figure 6.35. Drag guides onto the page to create an initial structure for the layout tables. [View full size image]   TIP If you're having trouble setting the guides at the exact positions, double-click the guide. The Move Guide dialog opens, which allows you to precisely position the guide based on a pixel value you set. 3. With the guides now set, place your cursor onto the page and click the Layout Table icon in the Insert bar's Layout category. Your cursor changes to a crosshair. 4. Using the new tool, draw a square by clicking, holding, and dragging from the top, leftmost edge and moving down and right until the table's width is the 640 pixel width and the 177 pixel height, consuming the first rectangular area outlined by the guides. Although Dreamweaver doesn't allow you to set an ID for a table in Layout mode, we'll assume that this is the Header table. Later, we'll explore the Autostretch option to make this table span 100% of the browser region. The result resembles Figure 6.36. Figure 6.36. Draw a new table on the page that is 640 pixels wide and 177 pixels high. [View full size image] 5. Draw another table below the Header table. To do this, click the Draw Layout Table icon again, then click, hold, and drag from the top, leftmost edge (below the existing Header table) and moving down and right until the table's width snaps to the guide set at 640 pixels and snaps to the guide at 322 pixels. The result resembles Figure 6.37. Figure 6.37. Draw a new table on the page that spans 640 pixels wide and reaches the 322 pixel guide. [View full size image] 6. With your table now in place, switch to Standard mode to see the table transformation. You can temporarily hide the guides by choosing View, Guides, Show Guides. As you can see from Figure 6.38, the table looks exactly as it would had you added it using the Table dialog. The difference in this case is that the drawing tools are a bit friendlier to use and much more flexible to manipulate than tables are in Standard mode. Figure 6.38. Even though it doesn't look like much of a table in Layout mode, the transformation is exact in Standard mode. [View full size image]