Laying Out Pages with Tables

As far as Expression Web is concerned, data tables with their borders turned off are layout tables. Layout tables create a framework into which you place chunks of text, pictures, and even other tables. By changing the table's layout and dimensions, and the alignment of page content, you change how content is arranged inside the page. Figure 10-9 shows a page layout using a table to hold the different parts.

Figure 10-9: This page uses a layout table to give it structure.

The easiest way to work with a layout table is to use it as the starting point for a new, empty page and then insert content into the layout table. You can certainly add a layout table to an existing page, but the operation requires some cutting and pasting to get the content already sitting in the page into the new layout table.

Although, on the HTML level, layout tables and data tables are technically the same (and use the same HTML tags-<table>, <tr>, and <td>), Expression Web treats these two table varieties as fundamentally different animals. Therefore, creating and working with layout tables involves using a distinct set of tools. Layout table tools live inside the Layout Tables task pane, as shown in Figure 10-10. To display the task pane, choose Task Panes Layout Tables.

Figure 10-10: The Layout Tables task pane.

Using a "canned" table layout

The easiest way to add a layout table to your page is to choose one of the layouts Expression Web provides. To do so, place the cursor in your page where you want the layout table to appear. In the Table layout box of the Layout Tables task pane, scroll until you see a format you like, and then click it. Just like that-a layout table appears inside your page. (If none of the layouts looks exactly like what you want, just pick the closest approximation-you can change the table setup later.)

The table's green outside border displays pixel measurements for each row and column in the table. If you click one of the blue interior borders inside the table, measurements for the selected cell appear. (By the way, these borders are visible only in Design view. When you see the table in a Web browser or in Preview view, the borders are invisible.)

Drawing a layout table from scratch

After you're familiar with how layout tables work, you may find it easy to draw your own. Expression Web gives you two methods for creating new layout tables; here's our take on the easiest method:

1. Place the cursor in your page where you want the layout table to appear, and then, in the Layout Tables task pane, select the Insert Layout Table option.

   An empty layout table, measuring 450 x 450 pixels, appears inside the page.

   Tip 

   You may find it easier to draw your table with Expression Web rulers and grids visible; to show rulers or grids, choose View Ruler and Grid Show Ruler or View Ruler and Grid Show Grid.

2. To add cells to the table, in the Layout Tables task pane, click the Draw Layout Cell button.

   After you click this button and move the cursor over the layout table, the cursor turns into a little drawing tool.

3. Click inside the layout table and, while holding down the mouse button, drag the cursor diagonally to draw a rectangle the size and shape of your desired cell.

   To create a simple row or column, click one of the green table borders, and then drag the cursor to the opposite corner of the table. Or, click anywhere inside the table and draw a rectangle that's any size or shape.

4. Release the mouse button to create the cell.

   The layout cell you drew appears inside the table, surrounded by a blue border. Depending on how you drew the cell, other placeholder cells may appear inside the table to fill out the table's structure.

You can fill a layout table with as many layout cells as you like (within reason, of course). Drawing layout table cells takes a bit of practice, so don't be afraid to press Ctrl+Z to undo your changes if you don't like the results. You can always try again, or you can tweak the measurements of the cells later.

Turning a data table into a layout table

If you're more comfortable using the data table tools to build tables, that's no problem. You can easily transform filled grid tables into layout tables. To do so, follow these steps:

1. Create the data table and insert the content of your choice. (We tell you how earlier in this chapter.)

   If you're working with an existing table, skip this step.

2. Right-click the table, and from the pop-up menu that appears, choose Table Properties.

   The Table Properties dialog box appears.

3. In the dialog box, select the Enable Layout Tools option.

4. If you haven't already, turn off table borders by entering 0 in the Size text box.

5. Click OK.

   The Table Properties dialog box closes.

Although the table looks no different than before its transformation, Expression Web now considers the table a layout table. (You can tell because when you pass the cursor over the table, its outer border turns green, and its inner borders turn blue.) You can now use the Expression Web layout table tools to play with how the table looks.

Changing a layout table's width, height, and alignment on the page

You can change the layout table's dimensions to keep everything visible within the browser window. If you're not sure how wide or tall to make your layout table, Expression Web can give you some ballpark numbers. In the lower-right part of the Expression Web status bar, click the Page Size box. (You see two numbers separated by an x, such as 760 x 420.) The menu that appears shows you, in pixels (width x height), the amount of page space that appears inside common browser window sizes at different monitor resolutions, ranging from your monitor's setting down to lower resolutions. (Resolutions higher than your monitor's setting aren't available.) If you want to design your pages so that they look good when viewed at 800 x 600, your layout tables should be no wider than 760 pixels. (They can be taller, however, because visitors are more willing to scroll up and down than they are to scroll from side to side.)

Tip 

The Ruler and Grid may make it easier for you to eyeball the dimensions of your table. To turn on the ruler and the grid, choose View Ruler and Grid Show Ruler and View Ruler and Grid Show Grid.

To specify a fixed width for the layout table, and to specify the layout table's alignment on the page, follow these steps:

1. In Design view, click anywhere inside the layout table.

2. In the Layout Tables task pane's Width text box, enter a number of pixels and then press the Tab key.

3. To set or change the table's height, in the task pane's Height text box, enter a number of pixels and then press the Tab key.

   REMEMBER 

   By default, the layout table's height equals the height of the page, which is ultimately determined by the size of the table's contents. You can generally leave the table height as it is, unless you specifically want to control the table height.

4. To change the dimensions of the cells inside the table to maintain the table's proportion, select the Auto-Scale Cells with Table check box.

5. To change the table's alignment on the page, in the task pane, click the Align Left, Align Center, or Align Right button.

   By default, layout tables are left aligned.

Changing row and column dimensions

Although it's perfectly acceptable to set a layout table's overall dimensions, you gain more control by changing the dimensions of the individual rows and columns inside the table. For example, you can set one column to a fixed width and another one to stretch automatically so that it resizes according to the visitor's Web browser (also known as autostretch).

Here's how to change the dimensions of individual columns and rows in your layout table:

1. In Design view, move the cursor over the layout table's outer border until it turns green, and then click the outer border.

   The table's row-and-column pixel dimensions become visible. Column widths are visible in little boxes along the table's top and bottom borders, and row heights are visible in little boxes along the left and right borders.

2. To change a column's width, click the down arrow inside the column's width box, and choose an option from the menu that appears:

   • Change Column Width: Choose this option to change the column's width (in pixels). In the Column Properties dialog box that appears, enter a number of pixels in the Column Width text box, and then click OK to close the dialog box.

   • Make Column Autostretch: Choose this option to cause the column to automatically stretch to fill the available space in the browser window. This option is most often used in the rightmost column in layout tables so that the column's contents can stretch as a visitor widens or narrows the browser window.

   • Use Column Spacer Image: Choose this option to insert an invisible spacer image (a transparent 1-pixel GIF) into the column to maintain the column's width in older browsers. This option is generally used in empty columns that exist only to add space between two columns filled with content.

3. To change a row's height, click the down arrow inside the row's height box, and choose an option from the menu that appears.

   (The options on this menu work just like the options for column width, which we describe in Step 2.)

Adding and deleting rows and columns

To add a new row or column to your layout table, follow these steps:

1. Place the cursor inside the layout table next to where you want the new row or column to appear.

2. Choose Table Insert Rows or Columns.

   The Insert Rows or Columns dialog box appears.

3. Select the Rows or Columns option button (depending on what you want to create).

4. In the Number of Rows/Columns box, enter the number of rows or columns you want to create.

5. In the Location section of the dialog box, select the option corresponding to where you want the new rows or columns to appear.

   Your choices are Above Selection or Below Selection (for rows) or Left of Selection or Right of Selection (for columns).

6. Click OK.

   The dialog box closes, and the new rows or columns appear.

To delete a row, column, or cell, click inside the row, column, or cell you want to delete and then choose Table Delete Row, Column, or Cell.

Filling layout tables with content

You can insert into a layout table any elements that you can insert into a regular page (such as headings, paragraphs, or pictures). Just click inside a cell and proceed as usual. If you add a layout table to a page that already contains text, pictures, and other content, simply cut and paste the content into the appropriate places in the table.

Tip 

Keep in mind that you don't have to fill every cell in your layout table. Because the table is ultimately invisible to your visitors, you can leave some rows and columns blank to act as spacers between rows and columns filled with content (although you should keep your layout table as simple as possible).

Adding borders and backgrounds to layout table cells

You have the same options available for adding borders and backgrounds to layout table cells as you have for data table cells. Expression Web uses CSS styles to control borders and backgrounds, which gives you a lot of control over the line style, width, and color. To take full advantage of the stylish properties you can apply, create a class-or ID-based style that targets the cell.

We cover creating class-and ID-based styles in Chapter 7, but here's a brief rundown for creating a style rule for a layout table cell:

1. Select the cell for which you want to create a style rule.

2. Choose Format New Style.

   The New Style dialog box appears.

3. In the Selector box, type .stylename to create a class-based style rule or #stylename to create an ID-based style rule.

   REMEMBER 

   An ID can be used only once on a page, whereas a class can be used multiple times. You may want to use IDs for main section areas, such as #contentcell or #navigationcell.

4. Select the Apply New Style to Document Selection check box.

   When Expression Web creates the style rule, it also adds the class or ID to the layout table cell.

5. Use the options in the Border and Background categories to add borders and background colors or pictures to the selected cell.

6. Click OK.

REMEMBER 

The options in this section apply to individual layout cells. If you want to apply effects to more than one cell at a time, you need to select those cells first. (If you're applying a style to multiple cells, create a class-based style rather than an ID-based style.)

Like data table cells, you can also use the options in the Cell Properties dialog box to set options for selected layout table cells by right-clicking in the cell and, from the pop-up menu that appears, choosing Cell Properties. The options for borders are more limited because you can only specify a solid line-style border around all sides of the cell.

Deleting a layout table

If you change your mind about using a layout table in your page (which we hope you won't), you can easily delete the table. The problem is that all the table content goes, too.

To preserve the table content, you must first cut all the table content and paste it elsewhere in the page, outside the table. (Oy, what a pain.)

To delete the layout table, choose Table Select Layout Table, and then press the Backspace or Delete key.