Width and Height: Sets a width and height in pixels for your cell. The cell is considered a fixed width and remains the specific width and height even if the user expands the page in the browser. Autostretch: Assign a value in this text box to have the cell span a width of 100% in its layout table. Background Color: Sets the background color of the cell. Horizontal and Vertical Alignment: Sets the horizontal alignment (Left, Center, Right) and the vertical alignment (Top, Middle, Bottom, Baseline) of the content in the cell. Layout cells always default to a vertical alignment of Top. No wrap: Check this box to prevent text within a cell from wrapping to the next line. Class: You can apply CSS styles to your cells by selecting a created class from this menu. CSS is covered in more detail in the next chapter. With your cells now created, you're ready to begin adding content. Adding Content to Layout Cells Adding content to layout cells is just as easy as it would be if the table were in Standard mode. To add content such as images, select the image from the Files panel and drag it into the cell. For instance, I'll drag the header_withnav.gif image into the Header cell. Next, I'll drag the subheader_companydirectory.gif image into the first cell of the Content table. Finally, I'll drag the head_adatheadminassistant.gif into the second cell. Adding content is just as easy. For instance, you can open the companydirectory.txt file located in the Assets folder, copy Ada's bio, and then paste it into the cell next to her picture. Of course, you can format the content once it's in the cell as well. When you're finished, your design should resemble mine pictured in Figure 6.45. Figure 6.45. Adding text into a layout cell is simply a matter of copying and pasting. [View full size image] Of course, Ada isn't the only employee in our directory. The problem becomes adding more rows to our layout table. In Standard mode, we had numerous options for adding a new row to our table. For instance, we could place our cursor into the last cell and press Tab to create a new row; we could access the Insert Row option from the Table submenu in both the context and Modify menus; and we could also use the Insert Rows or Columns dialog available from both the context and Modify menus. The Layout mode however, doesn't support these options. Instead, we must use the Insert Row Above or Insert Row Below buttons located in the Layout category of the Insert bar. Clicking one of these buttons effectively creates a new row in our layout table. To use this feature, simply place your cursor in the last cell and click the Insert Row Below button. A new row with the same dimensions as the previous row is added directly underneath (see Figure 6.46). Figure 6.46. Use the Insert Row Below button in the Layout category of the Insert bar to create a new row in a layout table. [View full size image] Repeat the process, adding Agnes's picture and bio. When you're done with Agnes, add a new row and continue adding employee images and bios until you have all the bios added to the page. When you're finished, you can switch to Standard mode and format the cells to your liking. TIP