HTML isn't very helpful when it comes to page layout. To gain a modicum of control, Web developers have turned to tables to help them design and organize a page. Tables rise to a lofty purpose when it comes to designing a Web page. In lieu of holding boring data, they contain images, page headings, product offerings, and more. On many pages, designers use the simple trick of hiding the table, so their pages look masterfully laid out, but the viewer doesn't see all the scaffolding at work behind the scenes.
Learning how to insert and manipulate tables well is the most effective skill you can have in your design repertoire if you want your pages to look professional. FrontPage also offers a sophisticated improvement on the traditional HTML tablethe layout table, which is surprisingly powerful. This tutorial will explain when and how to use all these tools.

So far, you've learned how to add attractive text and eye-catching images to your Web site, but they all appear in a more or less vertical line down your page. This probably isn't the gorgeous design you had in mind. How do you arrange these elements in an interesting and dynamic way that really gets the most out of a Web browser's screen space?

As you've seen, HTML isn't very helpful when it comes to page layout. To gain a modicum of control, Web developers have turned to tables to help them design and organize a page. Tables rise to a lofty purpose when it comes to designing a Web page. In lieu of holding boring data, they contain images, page headings, product offerings, and more. On many pages, designers use the simple trick of hiding the table, so their pages look masterfully laid out, but the viewer doesn't see all the scaffolding at work behind the scenes.

Learning how to insert and manipulate tables well is the most effective skill you can have in your design repertoire if you want your pages to look professional. FrontPage also offers a sophisticated improvement on the traditional HTML tablethe layout table, which is surprisingly powerful. This tutorial will explain when and how to use all these tools.

A table is a grid containing columns and rows. These columns and rows contain cells, which, in turn, can hold any kind of content you want to put inside them. Sure, you can use a table to list game scores, but a table can also provide you with a structure on which to organize your page. Tables help break up your page into separate regions. Any region can contain elements like text, pictures, and so on. A table used for page layout can be very simple. For example, it might consist of only two cells, a short narrow one on top containing a page banner, and a large one below for general page content.

Figure 5-1 illustrates the basic parts of a table.

Figure 5-1. This simple table shows the components you'll be managing when you use FrontPage's table tool. A table is made up of cells that form columns and rows. Cell padding is the space between a cell wall and its contents. Cell spacing is the thickness of the cell wall.

You need to know your table partsthings like table borders, cell spacing, and cell paddingbecause you'll manipulate each part to fine-tune the layout you want. FrontPage gives you two ways to control a table's appearance: you can format attributes of the entire table or you can manipulate the look and feel of individual cells. Many times, you'll want to do both.

HTML tables aren't like other tables you've encountered in Microsoft Word and similar programs. Once again, the browser is in charge of what your viewer sees and is quite capable of making your table look very different from what you envisioned. Even as you work with a table in Design view, you'll get a taste of this volatility. For instance, if you insert a large picture into a small cell, the cell expands to display the picture, enlarging the dimensions of the rows and columns that it sits in. And as you type in a table cell, the table may change its dimensions with each letter you add. These things happen because a table cell expands to display its contents. While this fluidity can be disconcerting at first, once you understand how HTML tables behave, you'll become a pro at managing them.

	<table border="1" width="100%" 
	cellspacing="14" cellpadding="20">
		<tr> 

			<td>&nbsp;</td> 
			<td>Text</td> 
			<td>&nbsp;</td>

		</tr> 
		<tr> 

			<td>&nbsp;</td>
			<td>&nbsp;</td> 
			<td>&nbsp;</td>

		</tr> 
	</table>

Inserting a table is usually the very first step when it comes to laying out a page. FrontPage gives you a number of ways to add a basic HTML table, and each has its own pros and cons.

5.2.1. Inserting a Table with the Toolbar

The Standard toolbar sports a fast and convenient feature that lets you insert a table and set its basic layout all in one step. Place your cursor wherever you want the table to appear and click the Insert Table button. A small table menu appears, as illustrated in Figure 5-2.

Figure 5-2. When you click the Insert Table button on the Standard toolbar, this grid appears. Use it to select the basic table layout you want.

Once you're looking at the table menu, you can do one of the following things:

• Pass your cursor over the grid to select the number of columns and rows you want.

• Keeping your mouse button depressed, drag across the grid to select the desired number of columns and rows. This option gives you the power to expand the grid, if you need to create a larger table than the one that you first see.

5.2.2. Inserting a Table Using the Table Menu

Often, when you insert a table, you'll want to specify more than just the number of columns and rows your table contains. For example, you might want to set cell padding or border thickness. In either case, you should use the Table menu.

Place your cursor in the document window and select Table Insert Table. The Insert Table dialog box appears, offering an abundance of settings that you can use to make the table of your dreams.

Tip: If you just accept the Table dialog box's standard settings and click OK, FrontPage creates a 2 x 2 table. You can modify it at any time with a right click, which gives you access to Table Properties. In fact, the Table Properties dialog box offers the same options as the Insert Table dialog box.

To set up your table, fill out the fields in the Insert Table dialog box as follows.

Tip: As you work with tables, you'll probably want to have the Tables toolbar in view. If it's not displayed on your screen, select View Toolbars Tables.

5.2.2.1 Saving settings in the Insert Table dialog box

You may need to create exactly the same types of tables throughout your site. FrontPage is one step ahead of you and lets you save basic table settings, so you don't have to make the same adjustments over and over again.

At the bottom of the Insert Table dialog box, you'll see an option called Set As Default for New Tables. Turn this checkbox on to save all the settings you entered while creating your table. Next time you insert a table, the settings display automatically in the dialog box, and you just need to click OK.

Note: This feature has one irritating bug. Unfortunately, FrontPage won't save your entry for the number of columns and rows. No matter what figures you enter and set as default, this dialog box always shows table size of 2 rows x 2 columnsforcing you to edit these figures each time you want a new table.

It's difficult to know, as you create a table, whether or not it meets your needs as a table template. A good idea is to just wait and see how your table ends up looking. Since you can also find the Set as Default option within the Table Properties box, you can apply it at any time, using any table.

5.2.3. Drawing a Table with Your Mouse

FrontPage has a nifty virtual tool for all Web authors who miss their pencils. There's no need to create your table using the Insert Table dialog box. Instead, you can simply draw it in Design view.

Start off by selecting Table Draw Table. Your cursor turns into a pencil. Drag it diagonally across the area where you want your table to appear. FrontPage responds by inserting a one-celled table.

You can add cells to the table, since at this point FrontPage is still in drawing mode. (Notice that your cursor still looks like a pencil.) Drag your cursor inside your new table, from one side to the other to create borders for columns and rows (see Figure 5-4).

Figure 5-4. FrontPage shows you where it will place the table line you're drawing by displaying a dotted line.

Note: This method inserts a fixed-size table. In other words, FrontPage measures the dimensions of this table in a fixed number of pixels that won't change. See the box "Fixed vs. Fluid Design" on Section 5.2.2 for the full story. If you want to use a fluid table, create a table using the menu or toolbar instead. In the long run, you'll have an easier time managing tables inserted using the menu and dialog box, so drawing like this is usually not the best approach. Drawn tables also occasionally suffer from display problems like empty cells disappearing from view.

If you drag outside the table, FrontPage creates a new one-celled table. In fact, the pencil sticks around until you actively get rid of it. To get your cursor back to normal, select Table Draw Table again or click the Draw Table (not Draw Layout Table) button on the Tables toolbar.

5.2.4. Converting Text to a Table

When you need to move a lot of existing text into a table, an afternoon of cut and paste might seem like the only tortuous option available. Microsoft Word veterans probably have their hands up and are thinking of the feature that makes quick work of turning text into tables. FrontPage, you'll be glad to know, is equally adept. As in Word, for this feature to work well, your text must contain some sort of uniform punctuationlike paragraph marks, commas, or tabsthat you can use to separate text into appropriate cells.

To convert text into a table, first select all the text that you want to put into the new table. Then select Table Convert Text to Table.

Tip: You can also convert text that you've pasted in from another program, like Word. Just make sure that when you paste, you keep whatever formatting you want to use to create the table (pop back to Section 2.2.1 to review pasting options).

A Convert Text to Table dialog box displays. Here, FrontPage is asking you how you want to break down the text. Select whatever kind of character currently divides the elements you want in their own cells. For example, if there's a tab between each item, select tab and click OK. If you don't see the character you need, you can enter it yourself. If you want each word to have its own cell, for instance, select Other and type a space in the box.

Note: FrontPage doesn't recognize tabs from other programs. Only tabs you've created in FrontPage work as separators. If you're pasting in text from another application that contains tabs, try selecting Other and entering a space in the box instead.

You can also do the reverse: click in any table and select Table Convert Table to Text. FrontPage removes all table formatting and spills the text back out onto your page.

Invariably, tables require a lot of adjustments and edits, especially if you're using them to help lay out a page. This section shows you how to select and manipulate different parts of your table so you can change the table's shape and overall appearance.

5.3.1. Selecting Parts of a Table

A table is the sum its parts: the rows, columns, cells, and so on, each of which possesses its own unique properties (like height and width). Before you can modify a table's innards, you first have to select the part you want to work on.

5.3.1.1 Selecting a table

To select a table:

• Click anywhere inside the table and then select Table Select Table.

• Click anywhere inside the table and select the <table> tag within the Quick Tag toolbar (Section 1.1.1).

5.3.1.2 Selecting a row

To select a row:

• Click anywhere inside a row and then select Table Select Row.

• Click anywhere inside a row and then select the <tr> tag within the Quick Tag toolbar.

• Place your cursor at the left margin of a row. When the pointer turns into a rightward arrow, click to select the column. Drag up or down to select multiple rows.

5.3.1.3 Selecting a column

To select a column:

• Click anywhere inside a column and then select Table Select Row.

• Place your cursor over the top margin of a column. When the pointer turns into a downward arrow, click to select the column. Drag across to select multiple columns.

5.3.1.4 Selecting cells

To select cells:

• Click inside a cell and then select Table Select Cell.

• Click inside a cell and then select the <td> tag within the Quick Tag toolbar.

• Press the Alt key and click the cell. To select additional cells, press Ctrl and click in the cells you want. Or press Ctrl+Alt and drag across cells to select all cells your cursor touches. (These cells don't have to make up a continuous span. You can stop dragging and click in additional cells, tooas long as you hold down the Ctrl and Alt keys.)

• Drag your cursor across a range of cells to select all the cells your cursor passes over.

5.3.2. Manipulating Table Structure

Even if you plan carefully, you're bound to end up adding, moving, or deleting table rows, columns, and cells.

5.3.2.1 Inserting rows or columns

To insert a row or a column, place your cursor within your table and select Tables Insert Rows or Columns. The Insert Columns or Rows dialog box that appears lets you insert however many rows or columns you specify on either side of your cursor.

The Tables toolbar offers a quick alternative: click in a cell to the right (for a column) or below (for a row) where you want the new row or column to appear. Click either the Insert Rows or Insert Columns button (or right-click the cell and choose either selection from the pop-up menu). If you select numerous rows or columns and then click one of these buttons, FrontPage inserts the number of columns or rows you selected.

5.3.2.2 Deleting rows, columns, or cells

The fastest way to delete rows, columns, or cells is to select them and press Delete. You can also click the Delete Cells button, or right-click the item once you've selected it and select Delete Columns, Delete Rows, or Delete Cells from the pop-up menu. As you select rows or columns, FrontPage also adds options to delete them to the Table menu.

5.3.2.3 Moving table components

You can copy or cut any table partlike a row, column, or celland paste it within another part of the table. If you want to create a new table from the excerpt, just paste it in an empty spot on a Web page.

5.3.3. Table Properties

FrontPage lets you change other table attributes, like size, alignment within the page, text wrapping, border, and color formatting, by using the Table Properties dialog box (Section 5.2.2). The Table Properties dialog box offers the exact same choices you learned about in the Insert Table dialog box (Section 5.2.2).

5.3.4. Adding a Table Caption

If you're using a table to display actual data, you'll probably want to label it. To tell people what you're showing them, FrontPage provides a caption feature. To use it, click anywhere within the table and select Table Insert Caption. A blinking cursor appears over the table. Type the caption text. If you'd rather have your caption beneath the table, right-click the caption, select Caption Properties, and change its position setting to "Bottom of table."

5.3.5. AutoFormat Feature

If you're not a design guru, or just don't have the time to play around with borders, colors, and shading settings, FrontPage has a nice feature that helps you decorate your table with only a couple of clicks.

Start off by clicking anywhere within a table to select it. Next, select Table Table AutoFormat or click the Table AutoFormat button on the Tables toolbar. The AutoFormat dialog box that displays contains scores of format options for your table. Click on a format, and the Preview pane shows you what it'll look like. If you want to exclude a few of the settings, turn them off using the checkboxes in the lower portion of the dialog box. The Preview pane reflects any changes. Click OK, and your table sports the new look (see Figure 5-5).

Figure 5-5. AutoFormat can spruce up a plain table (like the one at top) in a jiffy. FrontPage offers a variety of AutoFormat styles, a few of which are pictured here. This quick formatting tool can really make the information you're presenting easier to read.

5.3.6. Nested Tables

Tables really help structure a page so you can place elements where you want them. However, you might find that you want to exercise that same control inside a table. For instance, you may find that a table cell in one spot is too big or the wrong size for the material you want to put in it.

You can enter anything in a table cell: text, pictures, and even other tables. If you have a large cell that you want to divide, you can insert a table within it to manage the space. That's known as nesting. You can even nest another table within that nested table. But before you let your M. C. Escher instincts run wild, it's best to stop here and refrain from nesting yet another within that last table. Excessive nesting can slow the loading speed of your page.

Before you resort to nesting, check out all the options for managing cells that the rest of this tutorial covers. A simpler solutionlike merging or splitting cells might solve your problem.

FrontPage lets you control the appearance of each cell's contents, borders, and decoration (sounds festive, no?). Your control center for these maneuvers is the Cell Properties dialog box.

5.4.1. Alignment

Once your cells are holding text or pictures, they may not look quite as nice as you expected. Aside from bad writing or poorly shot pictures, sloppy or irregular cell alignment is often the biggest offender.

You can adjust alignment for one or more cells at a time. Select the cells, then right-click them and select Cell Properties from the pop-up menu. Within the Cell Properties dialog box, you can set vertical and horizontal alignment (see Figure 5-6).

Figure 5-6. Here's how some alignment combinations appear in a browser. Use the Cell Properties baseline setting to make text of different sizes line up horizontally.

Tip: If you've got multiple paragraphs within a cell and want to align one differently from the rest, FrontPage can handle it. Click anywhere in the paragraph and select Format Paragraph and set the alignment to whatever you want. Paragraph formatting overrides cell formatting.

5.4.2. Cell Dimensions

Since a table is made up entirely of cells, you need to size cells to format your table. FrontPage makes changing cell dimensions easy. You can enter absolute pixel values or measure according to the percentage of a browser screen you want the cell to occupy. (What's the difference? Pop on back to "Fixed vs. Fluid Design" on Section 5.2.2.)

Control the display of your fluid HTML tables, by setting column width in percent. To do this, select a cell or column (again, if you're widening you can select one or more cells, but if you're shrinking you must select all the cells in the column), open the Cell Properties dialog box, and specify width by percent. This measure is the percent of horizontal space that the column takes up within the table. In a table with two columns, you can set one at 10 percent and the other at 90 percent. In a table with four columns, make each 25 percent. Whatever settings you choose, make sure all columns all add up to 100 percent.

Controlling column width in fixed tables works the same way, except instead of entering a percentage, you'll enter exact pixel measurements.

Always remember that table cells expand to show their contents. For this reason, table dimensions sometimes change as you type. If one cell expandsautomatically or through your interventionthe row or column it sits in expands to that size as well. When you expand a row or column, its neighboring row or column expands, too.

In Design view, you can also resize a cell by clicking a cell wall and dragging it. FrontPage automatically changes the dimensions of the row or column in which the cell sits.

5.4.3. Cell Borders and Background

The Cell Properties dialog box lets you edit a cell's borders and background. If you've already set table borders, you may not need to set individual cell borders. But sometimes you might want to; the process works exactly the same way as it does for an entire table (Section 5.2.2).

Note: Only Internet Explorer recognizes (and displays) certain special cell border settings like light and dark borders.

Setting a cell's background works the same way as setting a table's background (Section 5.2.2.1). Thankfully, most browsers can display color or even picture backgrounds; the few that don't simply keep your cell's background the same color as the rest of the Web page.

5.4.4. Merging and Splitting Cells

Most self-respecting (and finicky) Web designers don't like the rigid, graph-paper like layout FrontPage gives them when it creates a new table. For example, say you've got a table heading that really applies to two columns that should sit beneath it. How can you create an extra wide cell above these two columns?

FrontPage is ready with a feature that solves this kind of problem quickly and easily. You can merge cells, turning them into one larger cell that encompasses the area formerly taken up by multiple cells. For example, you could merge two adjacent cells at the top of a column and create one heading. If need be, you can also split a cell in two, or four, and so on (that, as you might expect, is called splitting).

To merge cells, first select the cells you want to merge. You won't get away with any funny stuff here. These cells must form a square or rectangle. If you select cells that aren't connected or that form an L-shape, FrontPage won't let you perform the merge.

Once you've selected the cells, you can go ahead and merge them. To do this, select Table Merge Cells or click the Merge Cells button on the Tables toolbar. (You can also right-click the selection and open Cell Properties from the pop-up menu, then specify a new number of columns or rows for the cell to span. But this is less intuitiveit's hard to see what you're doing.) Another method is to use the Eraser tool on the Tables toolbar. Click the Eraser button to activate it. Then drag your cursor across any cell wall to delete it. To deactivate the eraser, click the button again. Whatever your method, merging creates cells that span columns or rows (see Figure 5-7).

Figure 5-7. Merge cells across columns, rows, or both to create larger cells like those in this table.

You may find that instead of merging, you actually need to divide a cell. FrontPage can split a single cell into two or more cells vertically or horizontally. To split a cell, click inside or select it. Select Table Split Cells, click the Split Cells button, or right-click the cell and select Split Cells from the pop-up menu. The Split Cell dialog box appears. Choose whether you want to split the cell into rows or columns, enter a number, and you're on your way to splitsville.

For ages, Web designers have used regular HTML tables to help lay out their pages. Because these tables weren't originally designed to perform such duties, occasionally they buckle under the loador, put another way, they're not always as nimble as most designers would like them to be. For example, positioning cells exactly where you want them can be an ordeal. To address these limitations, FrontPage has added a powerful set of tools, called layout tables, which are designed expressly for page layout. Layout tables don't function like the regular tables you've been reading about so far. FrontPage's layout tables are based on drafting programs that let designers place elements in precise locations on a design grid. All measurements are fixed and absolute, not fluid like traditional HTML tables.

Fixed width tables do carry some drawbacks, which you'll learn about in a moment. If you decide that you want to use layout tables, read on to learn how to insert and format them to suit your needs. You'll also learn about another layout tool, called a tracing image, which lets you trace an image from a picture file and use it to shape your page design.

5.5.1. Pros and Cons of Layout Tables

For all their advantages, regular HTML tables can still make page design a challenge. If you'd like to add text to a specific spot in the middle of a page, maneuvering a cell into that precise location can take a lot of work. FrontPage's layout table gives you much more control. You can create a cell of any size anywhere you want. Then you can just plunk it down without a care in the world, and FrontPage does all the grunt work of arranging cells to support it.

This is truly one of FrontPage 2003's most impressive features, but it does come at a price. Layout tables work because they use fixed pixel dimensions. Unlike HTML tables that shrink or expand within a browser window, layout tables are static and unchanging (see the "Fixed vs. Fluid Design" box on Section 5.2.2 to understand the difference). If you use a layout table to create a page, not all browsers are going to be able to display it as you intend. For example, a page that looks great on your 1024 x 768 monitor won't fit on a Web surfer's 800 x 600 screen. She'll have to scroll to the right to see what's on the rest of the page. This may interfere with your graphics, hiding portions of pictures and text. FrontPage's layout tables can produce a great design, but not everyone can always enjoy it.

If you can deal with this, or if the allure of easy layout trumps any possible difficulties for your viewers, read on.

5.5.2. Inserting a Layout Table

FrontPage gives you a separate set of tools for layout tables, which are distinct from the HTML table controls covered earlier. You can manually create a new layout table or pick one from FrontPage's layout template selections. You can also turn an existing HTML table into a layout table, and vice versa.

5.5.2.1 Creating a layout table

You'll need the Layout Tables and Cells task pane to create and edit layout tables. To open it, select Table Layout Tables and Cells, or click the task pane drop-down menu and make the same selection.

You can create a layout table using any of the following methods:

• Use a template. Scroll down within the task pane to view the many table layout templates that come with FrontPage. The display at the bottom of the pane previews how the table would structure things on your page. The tables you see here represent a variety of page configurations and will probably satisfy most of your design impulses. Click a selection, and FrontPage inserts the layout table on your page, instantly organizing your workspace. Using one of these preformatted tables could save you a lot of work.

• Draw a layout table by clicking the Draw Layout Table button (within the Tables toolbar or the task pane). Your cursor turns into a pencil. Use it to draw a table in the document window. A one-celled layout table appears to get you started.

• Click the Insert Layout Table link at the top of the task pane. A one-celled table appears in the document window.

5.5.2.2 Adding layout cells

Layout tables consist of rows, columns, and cells just like other tables. However, unlike HTML tables, not all cells are created equal. Layout tables differentiate between layout cells and ordinary cells. Layout cells contain text or graphic elements while ordinary cells are empty. FrontPage creates ordinary cells to space out layout cells. (Microsoft probably should've called them inert cells or worker bee cells.)

When you create a layout table, you start off with only one cell. (This one cell is an ordinary cell, but if you were to type in it, it would become a layout cell.) To see how layout and ordinary cells interact, add another cell to your new table. Click the Draw Layout Cell button and draw a small cell in the center of the layout table.

Though you drew one cell, FrontPage unleashes a flurry of cellsit actually creates nine cells within the table, as shown in Figure 5-8. The cell you drew is the only layout cell. The other, ordinary cells surround it to keep it in place. FrontPage manages ordinary cells as it sees fit and may delete or rearrange them to support your layout cells. If you type any text into an ordinary cell, it rises in stature and becomes a layout cell.

When you click in a cell and type something, FrontPage hides the layout formatting display. To view the measurements of a layout table, drag your cursor over the table border until a green outline appears and click anywhere along the green line. Or, in the Tables toolbar or the task pane, just click the Show Layout Tool button twice.

Note: Clicking the Show Layout Tool button converts your table to an HTML table only once (see the next section, "Converting tables").

Figure 5-8. When the Show Layout Tool is active, FrontPage displays layout tables with a green border (the dark line surrounding the table). Individual layout cells sport a blue border. Ordinary cells in a layout table are surrounded by dotted lines.

5.5.2.3 Converting tables

FrontPage makes it easy for you to transform your tables from HTML to layout tables. To convert an HTML table to a layout table, click anywhere in the table, then click the Show Layout Tool button within the Tables toolbar or the task pane. Or right-click anywhere in the table, select Table Properties, and then click the "Enable layout tools" radio button. Voil¨¤. Your HTML table turns into a layout table. To verify this, select the table. Design view displays advanced handling options and measurements like those pictured in Figure 5-9. Though you may still see your table's dimensions measured in percent, you'll only be able to adjust the table's dimensions by using pixel measurements from now on.

Tip: If you're having difficulty selecting a table in Design view, try this shortcut: click once inside the table, and then click the Table tag icon in the Quick Tag Selector toolbar (Section 1.1.1) just above the document window.

Figure 5-9. Layout tables always feature the profusion of colored borders and cell dimension tags that you see in the top of this document window. To see them, select the table. Old-fashioned HTML tables (like the one at the bottom) never show their dimensions in Design view even when you select them.

You can also do the reverse: turn a layout table into a normal HTML table. To do so, click anywhere in the table, and then click the Show Layout Tool button (within the Tables toolbar or the task pane) to deactivate it. (You can also right-click the table, select Table Properties from the pop-up menu, and click Disable layout tools.) The table is no longer a layout table, but FrontPage still measures it in pixels. If you want a fluid table, go into Table Properties and change table measurements to percentages.

5.5.3. Manipulating Layout Tables

Layout tables come with their own set of editing techniques, which are different from what you learned earlier about editing HTML tables. To edit a layout table, pass your cursor over the table border until a green outline appears and click anywhere along the green border. Or, within the Tables toolbar or on the task pane, click the Show Layout Tool button twice. Layout table and cell borders appear in green and blue with small square handles and dimension boxes.

You can drag the handles of layout cells and tables to whatever width and height you like or you can enter exact measurements. Click on any column or row measurement box and select either Change Row Height or Change Column Width. Within the dialog box that displays, enter the new number of pixels.

5.5.3.1 Setting more cell properties

To adjust cell properties like color and cell padding, select one or more cells and, in the task pane, click the Cell Properties and Borders link (or, if that's not visible, click Cell Formatting). A number of formatting options, including those for color and border, display in the task pane. FrontPage immediately applies the settings you make in the task pane to the cells you've highlighted.

To see additional decorative options, in the task pane, select the Cell Corners and Shadows link. Doing so displays controls that let you add L-shaped borders with a shadow effect that'll make your cell look 3-D. You can also add soft, curved corners to a cell. Click a curved corner button to turn it on and click it again to turn it off. When you turn on a corner button, you automatically activate the cell's header or footer setting, which you'll find if you click the Cell Header and Footer link in the task pane. The Header and Footer pane contains selections for formatting the top and bottom borders of a cell, with bands of color to frame cell contents. All these controls work together to create effects like those shown in Figure 5-10.

Figure 5-10. Layout cell formatting can include 3-D shadow effects and curved corners. A header band blends in with curved corners at the top of this cell, while the bottom features only a plain thick footer strip. In a browser, the table's dotted lines won't show up, so the cell looks like it's floating alone over the page.

5.5.4. Setting Page Margins

Page margins set the distance between the edge of a browser window and wherever the content starts on your page. Most browsers automatically set margins of 8 or 15 pixels. There may be times when you want to control margin display. For instance, maybe you want your colorful company banner to stretch to the very edge. In that case, you'd want to set your margin width to zero.

To do so, pop over to the Layout Tables and Cells task pane where you'll find a link called Set Page Margins. You can also select File Properties and click the Advanced tab to make the same settings on any page. Both commands open the Page Properties dialog box, pictured in Figure 5-11.

Figure 5-11. The Page Properties dialog box seems to repeat itself: What's the difference, you might reasonably ask, between Margin Width and Left and Right Margin? The answer lies in the fact that different browsers respond to different margin settings. Details follow below.

Different browsers recognize different types of margin-setting instructions. For example, Netscape Navigator obeys your Margin Width and Height settings, but not your Top, Left, Bottom, and Right margin settings. The opposite is true of Internet Explorer. So, if you want your margin settings to work in a variety of environments, enter them in all the boxes that appear in this dialog box.

5.5.5. Adding Flexibility to a Layout Table

The fixed nature of layout tables can present you with some design challenges. Remember that layout tables are measured in exact pixels, which means that they're the same size, no matter how big or small your viewer's browser window is. If your page layout isn't large enough to fill a browser window, distracting areas of empty space may appear, as in Figure 5-12.

FrontPage helps you get around this problem with its autostretch feature. Use autostretch to allow one column in your table to be flexible instead of fixed. The column "stretches" to fill a browser window. Apply this to a column containing elements that expand gracefully, like long passages of text. In contrast, menu columns and fixed pixel graphics don't widen well. They can end up creating an unsightly blank space like the one you're trying to eliminate.

Figure 5-12. Top: Things that make a designer shudder. If a browser window is larger than a layout table's fixed size, your viewers end up looking at honkingly big white void. Bottom: The solution lies in making one column flexible so that content expands to fill the screen.

Before you try this maneuver, make sure that you click the Show Layout Tool button (within the Tables toolbar or the task pane) once or twice until you to see your layout table's measurements. To make a column autostretch, click its measurement box and select Make Column Autostretch (see Figure 5-13). Save the page and preview in a browser to see the difference.

Figure 5-13. When FrontPage's layout tools are active, you can click any measurement box to display this pop-up menu. FrontPage limits you to setting only one column to autostretch.

5.5.5.1 The spacer image

When you save your page, FrontPage prompts you to save an image file called msspacer.gif. What's that? This humble image file holds the key to your table's new flexibility. To make one column flexible, FrontPage sets it at 100 percent screen size. If left alone, that autostretch column would hog the whole screen and muscle out the other columns. To preserve the width of the fixed columns, FrontPage inserts a transparent graphic in each column. As you learned earlier, a column can't be smaller than any element it contains. FrontPage sets the width of the transparent GIF to the pixel width of the column and inserts it, preserving the column's fixed width against its flexible neighbor. Take a peek in your page's code, and you'll see msspacer.gif inserted in various pixel sizes.

If you want to insert a spacer image manually, click the measurement box at the top of a column and select Use Column Spacer Image (see Figure 5-14). You can use this menu to remove a GIF as well. Select Use Column Spacer Image to turn the checkbox off. Removing the autostretch setting from a neighboring column also removes the GIF files.

Figure 5-14. A checkmark next to Use Column Spacer Image indicates that the column on the left contains a spacer GIF. The column next to it is the autostretch column, set to percent.

Web designers use transparent GIFs all the time to space out elements within table cells or text. Because these picture files are transparent, viewers never know they're there.

5.5.6. Using a Tracing Image to Create Page Layout

Some Web authors prefer to occasionally lay out a page by first drawing the design with pencil and paper. Or they may get Web page prototypes submitted to them by designers. If that happens to youhoney, can you make the site look like this?you may want to use FrontPage's image tracing feature to build your page layout.

FrontPage lets you take any image and place a washed out version of it behind your workspace in Design view. It's just like the old tracing paper trick you learned in grade school. You then use the program's layout tools to trace over the image as you create your page's layout structure. FrontPage saves the image with the site, but the picture never appears in a browser window.

Start out by selecting View Tracing Image Configure to display the Tracing Image dialog box. Browse to your tracing image and then select it. Move the opacity slider left toward Transparent to avoid confusing the image with page content and click OK. The image displays in gray on your page. Then use the layout table tools to draw a table based on the image. If you find that you'd like to make the image more or less transparent, you can go back into the Tracing Image dialog box and adjust it. To do so, select View Tracing Image Configure at any time.

Hide the image when you're done by selecting View Tracing Image Show Image to remove the checkmark. You can also use this same menu command later on, if you want to see your tracing image again.

discuss this topic to forum