Tabling Your Layout with FrontPage 2003

The layout table's job is to act as a container for all the stuff inside a Web page (the text, pictures, and other elements collectively known as content). By changing the layout and dimensions of the table, you change how content is arranged inside the page. For example, if you want to create a two-column layout for your Web page, create a two-column table, and then insert the text and pictures into the table's columns. By fiddling with the table's specifics, such as column width, alignment, and more, you gain even finer control over your page's layout.

Check out the Web for more information about how to use tables as layout tools. A good place to start is the Page Layout section of the excellent Web Style Guide. (Be sure to bookmark this site so you can read the whole thing when you have more time . . . great stuff.)

The easiest way to work with a layout table is to use it as the starting point for a new, empty page, and then to insert content into the layout table. It's certainly possible to 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. No matter. In the long run, structuring all your pages with layout tables helps give your site polish and consistency.

While on the HTML level, layout tables and regular (or "grid") tables are technically the same, FrontPage 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 and Cells task pane. When you create a new, blank Web page, this task pane pops open automatically. If it doesn't, or if you want to display the task pane while working with an existing page, choose View --> Task Pane (or press Ctrl+F1). Then click the task pane's title to reveal a drop-down list, and choose Layout Tables and Cells.

Using a "canned" table layout

The easiest way to add a layout table to your page is to choose one of the layouts FrontPage 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 and Cells task pane, scroll until you see a format you like, and then click it. Just like that, a layout table appears inside your page.

By default, the Layout Tables and Cells task pane appears each time you create a new, empty Web page, prompting you to choose a layout table right away.

The table's green outside border displays pixel measurements for each row and column in the table. If you click on one of the blue interior borders inside the table, measurements for the selected cell appear. (By the way, these borders are only visible 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 easier to draw your own. FrontPage gives you two methods for creating new layout tables:

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

An empty 450 pixel-by-450 pixel layout table appears inside the page.

You may find it easier to draw your table with FrontPage rulers and grids visible; to show rulers and/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 and Cells task pane, click the Draw Layout Cell button.

After you click this button and move your 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 on 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 exact measurements of the cells later.