Chapter 11

Your Tables Are Ready


CONTENTS

FrontPage 97 supports tables and table attributes to the fullest. Using tables, you can really control the layout of a page in a great number of ways, placing content and images where you want them. Well... sort of.

In the HTML tag family, tables are still growing up. For this reason, browsers handle tables differently. Some older browsers don't recognize tables at all; they leave your hard layout work lying in the dust, displaying a jumble of text and images. You should keep several different browsers around to test your tables as you design them and make compromises when you can.

There is good news, though. The latest versions of Internet Explorer and Netscape handle tables quite well. Each of these browsers has its own nifty little tricks up its sleeves. When designing pages to view in Netscape 3.0 and Internet Explorer 2.0, you can specify different colors for individual cells. Internet Explorer 3.0 adds even more flexibility in how you can view tables. You have the capability to specify a separate background image for each cell as well. Tables are the way to go if you want to create a fancy layout.

What Makes Up a Table?

A table has several elements, and to understand them is to understand the terminology needed to create them. Figure 11.1 shows an example of a basic table.

Figure 11.1 : The basic elements of a table are rows, columns, cells, and borders.

You'll see the following elements:

Setting the Basic Table

You enter a basic table in your page first by choosing the Table | Insert Table command. This command invokes the Insert Table dialog box, from which you can specify several table attributes.

Inserting a Table

By default, FrontPage creates a table that contains two columns and two rows and spans the entire width of your page. The table is aligned in the center of your page, has no border, has a cell padding of 1, and has a cell spacing of 2 pixels.

You can specify several different values for your basic table. Follow these steps:

  1. Place the insertion point on the line on which you want to insert the table.
  2. Choose Table | Insert Table. The Insert Table dialog box shown in Figure 11.2 appears.
    Figure 11.2 : Choose the table settings in the Insert Table dialog box.

  3. Enter the settings for your table. Each setting is described in the following sections.

TIP
You can preview your settings by clicking the Apply button in the Table Properties dialog box

  1. To add extended attributes to your table, click the Extended button. Follow the procedures outlined in "Using Extended Table Attributes," later in this chapter.
  2. When all table settings are entered, click OK to create the table.

Using the Insert Table Dialog Box

The Insert Table dialog box enables you to specify the number of rows and columns your table contains. You can also specify how the table aligns on the page and choose a table width in percentage of screen or pixels. You can specify the overall cell padding and cell spacing values in this dialog box, too.

Rows and Columns

You set the number of rows or columns in the Size section of the Insert Table dialog box. First, enter the number of rows in the Rows field, or use the up and down arrows to select a value from 1 to 100. Then, enter the number of columns in the Columns field, or use its up and down arrows to select a value from 1 to 100. Figure 11.3 shows a table that contains five rows and three columns.

Figure 11.3 : A basic table with five rows and three columns.

Table Alignment

The Table Alignment setting is the first in the Layout section of the Insert Table dialog box. This setting is not for the alignment of the contents within the cells; it controls how the entire table is aligned on your page.

NOTE
If you want to design tables that display fairly consistently in several browsers, you need to make some compromises. Some browsers don't recognize the right-alignment setting and align the table to the left side of the page instead.

To choose a table alignment, select one of the following options from the Alignment drop-down list box in the Layout section of the dialog box:

Figure 11.4 shows examples of left, center, and right alignment applied to the table in our example. The Alignment setting won't be noticeable unless the table width is set to a value of less than 100 percent.

Figure 11.4 : Tables aligned to the left, center, and right of a page.

Border Size

The Border Size setting controls the width of the border that appears around the outer edge of the table. Many people use tables to enhance page layout, placing graphics and text in fixed areas of the page. Most commonly, the tables used in this manner don't have borders; using them would detract from the effect of the layout. When you specify a border of 0, the FrontPage Editor displays the borders of the table and cells in dotted lines. Not to worry-this is just a guide for you to place your content in the cells. When you view the table in other browsers, you won't see those border designations. Figure 11.5 shows the table from Figure 11.3 with a border added.

Figure 11.5 : A border is added to the table.

The Border Size setting is found in the Layout section of the Insert Table dialog box. To set the border size, you can do one of two things:

Cell Padding

The Cell Padding setting controls how far from the edge of the cell's border its contents appear. To see what I mean, compare the top table in Figure 11.6 to the middle table, which does not use cell padding.

Figure 11.6 : Examples of cell padding and cell spacing.


TIP
For text content, you probably want to use cell padding and cell spacing to improve the appearance of your tables. If you want graphics to get as close to each other as possible to give the illusion that the table is one solid graphic, you might want to set cell padding and spacing to 0.

You specify Cell Padding settings in the Layout section of the Insert Table dialog box in one of two ways:

Cell Spacing

The Cell Spacing setting controls the width of the borders between cells (the row and column dividers, so to speak). Refer to Figure 11.6, where the center and bottom tables have cell spacing added. Compare them to the top table, which does not.

To set cell spacing, you use one of the following two methods:

Changing Table Width

You can format tables to different widths by using the Width section of the Table Properties dialog box. Figure 11.7 shows some examples of different table widths that are left-aligned. You set table width in percentage of screen or in pixels. You can also uncheck the Specify Width button to create a table that is sized based on the content within the table.

Figure 11.7 : You can specify a table width other than 100 percent.


TIP
In most cases, you want to specify the table width in percentage of screen because users might have their browser windows sized differently instead of maximized. Also, some users browse the Internet in 640×480 resolution, whereas others use 800×600 or 1024×768. If you specify the width in percentage of screen, the table resizes to accommodate the user's browser window.
On the other hand, if you're adding graphics to your tables, pixel settings help you visualize the table layout before the graphics are inserted. You should note, however, that when a user resizes his browser window or views it in a different resolution, portions of your table might not be visible. Perhaps a good rule of thumb here is to size your pixel table width for 640×480 resolution, and size your graphics accordingly. You should be fairly safe with that setting in most cases.

To specify table width, follow these steps:

  1. Enable the Specify Width checkbox in the Width section (it is checked by default). Uncheck this box if you want to create a table that automatically sizes to accommodate the contents within it.
  2. Select the In Pixels or In Percent radio button.
  3. Specify the percentage or number of pixels in a whole number. You don't need to add a percent sign or decimal point for percent value.
  4. Continue specifying other table properties, or click OK to exit the Table Properties dialog box.

Using Extended Table Attributes

Several new tags in HTML 3.2 enable you to enhance a table's appearance. It should be noted that these are proposed tags and are not widely supported as yet by browsers. Table 11.1 lists these tags. You add these attributes by specifying extended attributes for the table.

NOTE
You won't be able to view the results of these extended attributes in the FrontPage Editor. You can, however, view the results in a browser that supports these tags and attributes.

Table 11.1. Table tags (HTML 3.2).

NameValue Function
ALIGNBLEEDLEFT Aligns the table to the left edge of the window border.
ALIGNBLEEDRIGHT Aligns the table to the right edge of the window border.
COLSPECCn, Ln, or Rn Specifies column alignment of each column in the table. Acceptable values are Cn, Ln, and Rn. A table with four columns, for example, could have the following value entry: L20 R25 C100 C150. The first column will be 20 pixels wide and left-aligned, the second column will be 25 pixels wide and right-aligned, the third column will be 100 pixels wide and centered, and the fourth column will be 150 pixels wide and centered.
FRAMEABOVE Displays a border at the top of the table frame.
FRAMEBELOW Displays a border at the bottom of the table frame.
FRAMEBOX Displays a border on all sides of the table frame.
FRAMEHSIDES Displays a border on the top and bottom sides of the table frame.
FRAMELHS Displays a border on the left of the table frame.
FRAMERHS Displays a border on the right of the table frame.
FRAMEVOID Removes all outside table borders.
FRAMEVSIDES Displays a border on the left and right sides of the table frame. This is an Internet Explorer 3.0 feature.
RULESnoneRemoves all interior table borders.
RULESALL Displays a border around all rows and columns.
RULESBASIC Displays horizontal borders between the table head, table body, and table foot.
RULESCOLS Displays horizontal borders between all table columns.
RULESROWS Displays horizontal borders between all table rows.

You use the Insert Table dialog box or the Table Properties dialog box to add extended attributes for a table. A portion of the Table Properties dialog box is shown in Figure 11.8.

Figure 11.8 : Adding an extended table attribute.

To add an extended attribute to a table, follow these steps:

  1. To add extended attributes while you are creating the table, click the Extended button in the Insert Table dialog box. The Extended Attributes dialog box appears.
    To add extended attributes to an existing table, position the insertion point anywhere within the table. Right-click and choose Table Properties from the pop-up menu. The Table Properties dialog box appears. Click the Extended button. The Extended Attributes dialog box appears.
  2. To add an attribute, click the Add button. Add the attribute's name and value (refer to Table 11.1) in the Name/Value Pair dialog box.
  3. Choose OK to exit each of the dialog boxes and return to the FrontPage Editor.

Creating a Basic Table

If you want to create your own table, create a new page in the FrontPage Editor. Use the example shown in Figure 11.9 to try a table yourself.

Figure 11.9 : Insert a table with three rows and two columns.

To insert the table, follow these steps:

  1. Place the cursor on the line before the location where you want to insert the table. Choose Table | Insert Table. The Insert Table dialog box appears.
  2. Specify the following settings:
    Rows:                3
    Columns:            2
    Alignment:          Center
    Border Size:       5
    Cell Padding:      3
    Cell Spacing:      3
    Specify Width:    75 in Percent
  3. Click OK to create the table. The table appears on your page.

Setting Table Background and Border Properties

New to FrontPage 97 is the capability to apply table background colors, border colors, and background images to tables within the Table Properties dialog box. If you've been working with previous versions of FrontPage, you are aware that these attributes were once implemented by using extended attributes. Not only are these attributes now easily implemented through the dialog boxes, but the FrontPage Editor also supports viewing the table colors and background images.

You assign these settings in the Table Properties dialog box, which is shown in Figure 11.10. The upper section of this dialog box contains many of the settings that you entered when you created your table. The lower section of the dialog box contains the Custom Background section, where you specify background and border settings for the table.

Figure 11.10 : Assign background and border colors to your tables in the Table Properties dialog box.

To specify table background and border properties, follow these steps:

  1. Position the insertion point anywhere within the table. Right-click and choose Table Properties from the pop-up menu. The Table Properties dialog box appears.
  2. To use a background image in the entire table, check the Use Background Image checkbox in the Custom Background section.
  3. Click the Browse button. The Select Background Image dialog box appears.
  4. You select a background from the FrontPage clip art folder for this table. For the table you are creating now, select a background from your clip art folder as indicated below. You can also insert a background image using the following methods:
  5. If you prefer to use a solid background color for your table, choose a color from the Background Color drop-down menu or select Custom from the drop-down menu to create a custom color. The default selection is Default, which uses the same color as your page background. For example, to create a custom pale yellow color, you can enter values as follows:
    Hue 40 Sat 240 Lum 216, or
    Red 255 Green 255 Blue 204
  6. In a similar manner, select border colors for the table. The Border setting in the Custom Colors section of the dialog box applies to a solid border around the table. The Light Border and Dark Border colors apply if you want the table border to have a three-dimensional appearance.
    Create a light and dark border color for your table. For the Light Border color, choose Custom and create a color of Red 221 Green 221 Blue 187 (a very light olive green). Click OK to return to the Table Properties dialog box. Click the Apply button to preview the color in your table.
    For the Dark Border color, choose Custom and create a color using Red 153 Green 121 Blue 43. Click OK to return to the Table Properties dialog box.
  7. Click the Apply button to preview the settings before you exit the dialog box or click OK to close the Table Properties dialog box and apply the settings to the table.

Adding Content into Tables

After you place your table on your page, it's easy to place text, images, bots, or forms into the cells. The procedures to add content into tables are the same as those used to enter content on a page that doesn't have tables.

Entering Text into Your Tables

Start first with a basic text table to learn how easy it is to enter content into tables. Enter the following text into your table or make up your own example.

To enter text into your table, follow these steps:

  1. Place the insertion point inside the left cell in the second row. Enter STATE.
  2. Press the Tab key to move to the right cell in the second row. Enter CITY.
  3. Press the Tab key again. Enter California.
  4. Tab to move to the right cell in the third row. Enter Los Angeles.
  5. Press the Tab key again. FrontPage adds a new row to the table. Tab again and enter Sacramento in the second cell in the fourth row.
  6. Press the Tab key again. FrontPage adds a new row to the table. Enter Colorado.
  7. Press Tab and enter Boulder.
  8. Press Tab twice and enter Denver. When you're done, your table should look like Figure 11.11.
    Figure 11.11 : Text is added to the table.

Inserting an Image into a Table

Many times, tables are used to lay out text and images on a Web page because they offer more control over where images are placed. You'll learn more about this in a
later example. For now, add an image to the first row of your table. Follow these steps:

  1. Position the insertion point in the right cell in the first row, and choose Insert | Image. The Image dialog box appears.
  2. Choose the Other Location tab, and select the From File button.
  3. Click the Browse button and locate skyline.gif on the CD-ROM that accompanies this book. Highlight the file and choose Open. The image appears in your table.
  4. Click the image, and select the Make Transparent pointer from the Image toolbar. When you click on the white in the image, you notice that the background image from the table does not appear. When you add transparency to an image in a table that uses a background image, the background color or image that you use on your page shows through instead.
  5. Position the insertion point in the left cell in the first row. Choose Heading 2 from the Change Style drop-down menu on the Format toolbar. Enter United States Cities. When you're done, your table should look like Figure 11.12.
    Figure 11.12 : A heading and image are added to the first row in the table.

Inserting a Table Within a Table

You also can create a nested table-a table within a table. It is sometimes easier to create more complex tables using this approach. In the example shown in Figure 11.13, the original table contained four rows and three columns. A second table is inserted into the second cell in the fourth row. The table that is inserted has no borders and a width of 100 percent.

Figure 11.13 : You can create more complex tables by inserting tables within tables.

To insert a table within a table, follow these steps:

  1. Place the insertion point within the cell in which you want the table inserted.
  2. Choose Table | Insert Table.
  3. Specify the table properties as outlined in "Using the Insert Table Dialog Box," earlier in this chapter.
  4. Click OK to insert the table within the selected cell.

Selecting Tables and Cells

You're looking at the table you just created and saying, "So, what's the big deal? Just looks like a standard table to me!" As you are about to learn, you can reformat the cells in your table in a variety of ways.

You can apply cell formatting to a single cell or to multiple cells at once. To do this, you need to select the cells first. You can select a group of cells, an entire row or column, or the entire table.

Selecting Cells

To apply cell formatting to cells, you select only the cells you want to apply the formatting to before you choose the Edit | Properties or Cell Properties command.

To select a single cell or multiple cells, follow these steps:

  1. Place the insertion point in the first cell you want to select.
  2. Choose Table | Select Cell. The cell appears in an inverse highlight.
  3. To select additional cells, hold down the Shift key. You can drag the mouse to select a range of contiguous cells or click any remote cell to add it to the selection.

Selecting Rows

You can select an entire row or multiple rows at a time. A good example for doing this is formatting all the cells in the row as header cells.

To select an entire row, use one of these methods:

Selecting Columns

If you want to change the width of an entire column of cells, you can select one or more columns using one of these methods:

Deleting Tables and Cells

To delete a table from your page, you need to select the entire table. To select the entire table, use one of these methods:

It's pretty easy to delete cells from your table. Actually, all you have to do is select the cells, rows, or columns you want to delete and press the Delete key.

Working with Cells

After you select your cells, you use the Cell Properties dialog box, shown in Figure 11.14, to change the properties of the cells. This dialog box enables you to set the properties of a single cell or a group of selected cells in your table. Just as you can assign a background color or image to an entire table, you can also assign a background color or image to individual cells. The settings you can choose from are described in the following sections.

Figure 11.14 : The Cell Properties dialog box enables you to reformat your cells in a variety of ways.

Using the Cell Properties Dialog Box

Use the Cell Properties dialog box to specify properties for your cells. To open the Cell Properties dialog box, follow these steps:

  1. Select the cell or cells that you want to change, as described in "Selecting Cells," earlier in this chapter.
  2. Choose Table | Cell Properties, or right-click and choose Cell Properties from the pop-up window. The Cell Properties dialog box appears.

Specifying Cell Layout

You set horizontal alignment in the Layout portion of the Cell Properties dialog box. You can choose left, center, or right alignment. The first row of the table in Figure 11.15 shows examples of these alignments.

Figure 11.15 : Contents of cells can be aligned horizontally and vertically.

To specify horizontal alignment, follow these steps:

  1. In the Layout section's Horizontal Alignment drop-down list box, choose Left, Center, or Right alignment.
  2. Click Apply if you want to preview the results before applying the command.
  3. Click OK to apply the setting to your cells.

You also set vertical alignment in the Layout portion of the Cell Properties dialog box. You can choose to align the contents of your cell at the top, middle, or bottom sides of the cell. Refer to the second row of Figure 11.15 for examples of these types of alignments.

To specify vertical alignment, follow these steps:

  1. In the Layout section's Vertical Alignment drop-down list box, choose Top, Middle, or Bottom alignment.
  2. Click Apply if you want to preview the results before applying the command.
  3. Click OK to apply the setting to your cells.

Specifying Cell Width

You can specify a minimum cell width for each column in your tables. When you specify cell width, select the entire column of cells so that they are all formatted in the same width. To specify minimum cell width, follow these steps:

NOTE
It is best to format cell widths before you split and merge cells.

  1. Position your cursor above the column that you want to format. Click to select all cells in the column.
  2. Choose Table | Cell Properties, or right-click and choose Cell Properties from the pop-up menu. The Cell Properties dialog box appears.
  3. In the Minimum Width section, check the Specify Width checkbox. Enter a value in the field, and choose In Pixels (for a pixel width) or In Percent (for percentage of table width). If you leave the Specify Width checkbox unchecked, the cells expand to fit the contents.

Choosing Cell Backgrounds and Borders

The procedures to choose cell background colors and images are the same as those discussed in "Setting Table Background and Border Properties," earlier in this chapter. The only difference is that you can apply these properties to any cell or group of cells within your table. Each cell in your table can have a different background color, image, or border color if you so choose.

To assign background and border colors to individual cells, simply select the cells that you want to change, and select background and border colors as indicated in "Setting Table Background and Border Properties."

Creating or Removing Header Cells

It's typical to assign the top row and the first column in your table as header cells. Figure 11.16 shows a table where the top row is formatted as header cells.

Figure 11.16 : The header cells in the first row enable you to distinguish what the contents of the cells represent.


NOTE
When you format cells as header cells, the contents of the cell become what appear to be emphasized (or bold) text. You won't be able to use the Bold button on the Format toolbar to remove the bold formatting from the header cell. You need to convert the header cells back to normal cells for this. You can also italicize, underline, or use a fixed-width font in a header cell.

To change selected cells into header cells, enable the Header Cell checkbox in the Layout section of the Cell Properties dialog box. To remove header cell formatting, disable the Header Cell checkbox.

Changing Tables

As you work with your tables, you sometimes need to insert additional cells, rows, and columns. The following tasks describe the procedures to add additional cells and how to split and merge cells to create advanced tables.

Inserting Rows and Columns

You also can insert new rows or columns into your tables by using the Insert Rows or Columns dialog box.

To insert new columns, follow these steps:

  1. Select the column before or after the location where you want to insert the new column.
  2. Choose Table | Insert Rows or Columns. The Insert Rows or Columns dialog box appears.
  3. Select the Columns radio button.
  4. In the Number of Columns field, enter the number of columns you want to insert and choose whether you want to insert the new columns to Left of selection or Right of selection.
  5. Click OK to insert the columns.

To insert new rows, follow these steps:

  1. Select the row before or after the location where you want to insert the new row.
  2. Choose Table | Insert Rows or Columns. The Insert Rows or Columns dialog box appears.
  3. Select the Rows radio button.
  4. In the Number of Rows field, enter the number of rows you want to insert and choose whether you want to insert the new rows Above selection or Below selection.
  5. Click OK to insert the rows.

NOTE
When you insert rows or columns in your table, the new row uses the same number of cells as the row that you select to insert before or after. This is important to keep in mind when you insert new rows in tables that have split and merged cells.

Inserting a Cell

You can insert a new cell into your table. When you do this, the contents of the other cells shift over. You might need to reformat cell widths in that row to compensate. Sometimes, you want this shifting to happen, but you might be better off splitting the cell that appears before the cell you want to insert. That way, your table layout isn't affected.

To insert a cell, follow these steps:

  1. Position the insertion point at the point where you want to insert the new cell.
  2. Choose Table | Insert Cell. A new cell appears in the table, and the contents of the table shift over.

Splitting Cells

Splitting cells is the opposite of merging cells. You can split a cell into multiple rows or columns. Figure 11.17 shows an example of this. The top table, which has two columns and two rows, was split using the Split Cells command. The first column in the first row was split into three columns, and the second column in the second row was split into five rows. The bottom table of Figure 11.17 shows the results.

Figure 11.17 : Cells can be split into multiple rows or columns.

To split a cell, follow these steps:

  1. Select the cell or cells you want to split.
  2. Choose Table | Split Cells. The Split Cells dialog box appears.
  3. To split the cell into columns, choose Split Into Columns. In the Number of Columns field, enter the number of columns that you want to split the cell into.
    To split the cell into rows, choose Split Into Rows. In the Number of Rows field, enter the number of rows that you want to split the cell into.
  4. Click OK. The cells you selected are split as specified.

Spanning and Merging Cells

You can make a cell or group of cells span more than one row or column. Select an entire row, an entire column, or a range of contiguous cells, as shown in the top table in Figure 11.18, and choose the Table | Merge Cells command. The bottom table shows what the cells look like after they are merged.

Figure 11.18 : You can merge cells for advanced layout.

Notes on Selecting Split or Merged Rows

After you split cells, it sometimes can be a little confusing as to how to select them. How do you find out which row the big area is in? How do you select the smaller cells to the right of that big cell?

Figure 11.19 shows how you find out. Position the insertion point at the left edge of the table near the row you want to select. The cursor becomes a small arrow. Click to select the row.

Figure 11.19 : Selecting rows after splitting.

As you can see in the top table of Figure 11.19, the first row (which contains the cell that you split into columns) is still intact as a row.

Now look at the center table in the figure. The second row contains that big cell. To select it and its corresponding cell in the second column, place the mouse at the left side of the table, directly opposite the cell in the second row of the second column.

To select the cells in rows 3 through 7 of the table, position the mouse at the left side of the table, directly opposite the cell or cells you want to select. Click to select the row. The bottom table in Figure 11.19 shows this.

A similar situation occurs with the cells that were split into columns. The first column contains the big cell and first cell in the first row because those were the cells that were there originally. The second through fourth columns (the ones you split) don't have any additional cells associated with them in the example. All three of these cells are selected in the center table shown in Figure 11.20. The fifth column is still intact as a column, as shown in the bottom table of Figure 11.20.

Figure 11.20 : Selecting columns after splitting.

Using Extended Cell Attributes

You add extended attributes to cells in a similar manner as described earlier in "Using Extended Table Attributes." Table 11.2 lists the attributes you can add. Attributes that apply to cells fall in three categories: TH (for header cells), TR (for rows), and TD (for data cells).

Table 11.2. TH, TR, or TD tags (HTML 3).

NameValue Function
COLALIGNLEFT Left-aligns contents of all cells in the column.
COLALIGNRIGHT Right-aligns contents of all cells in the column cell.

To add extended attributes to a cell or group of cells, follow these steps:

  1. Select the cell or cells to which you want to add attributes.
  2. Right-click and choose Cell Properties from the pop-up menu. The Cell Properties dialog box appears.
  3. Click the Extended button. The Extended Attributes dialog box appears.
  4. To add an attribute, click the Add button. Add the attribute's name and value in the Name/Value Pair dialog box (refer to Table 11.2).
  5. Click OK to exit each of the dialog boxes and return to the FrontPage Editor.

Working with Captions

Tables don't always have captions, but in some cases, captions are necessary. They help you point out what the table is about. When you apply a caption to a table, it actually becomes part of the table instead of a separate line of text. Generally, a table caption uses one line.

Adding a Table Caption

To add a caption to a table, follow these steps:

  1. Position the insertion point anywhere within the table.
  2. Choose Table | Insert Caption. The insertion point moves to a center location above the table, where you can type the table caption. If your table uses a background image, the caption uses the same image as a background.

Selecting a Table Caption

To select a table caption, move the pointer to the left of the table caption and click to select it.

Building a Fancy Table

Build a quick example of a table that combines some of what you've learned here:

  1. Create a new page. Format the first line as Heading 2 and enter something like Building a Fancy Table.
  2. Choose Table | Insert Table to insert a new table. Assign it the following properties:
    Rows:                 2
    Columns:             2
    Alignment:           Center
    Border Size:        5
    Cell Padding:       0
    Cell Spacing:       0
    Specify Width:     600 in Pixels
  3. Choose OK. The table appears on your page.
  4. Place the insertion point in the upper-right cell and choose Table | Insert Table to insert another table. Assign the following properties to it:
    Rows:                 1
    Columns:             3
    Alignment:           default
    Border Size:        0
    Cell Padding:       0
    Cell Spacing:       0
    Specify Width:    300 in Pixels
  5. Choose OK. The second table appears within the first.
  6. Click in the first cell in the table that you inserted into the first row. Choose Table | Select Cell. Press the Shift key and click in the third cell in the inserted table. You should now have two cells selected in the inserted table.
  7. Choose Table | Split Cells. The Split Cells dialog box appears. Choose Split into Rows and enter 2 in the Number of Rows field. Choose OK to split the cells.
  8. The following graphics are located on the CD-ROM that accompanies this book. Choose the Insert | Image command to insert them into the new table. Use the From File option in the Other Location tab of the Insert Image dialog box. Insert the images into the table within the table as follows:
    Insert small1.gif (the "New" image) into the top cell in the first column.
    Insert small2.gif (the "Hot" image) into the bottom cell of the first column.
    Insert small3.gif (the "Guest Book" image) into the top cell of the third column.
    Insert small4.gif (the "Send Email" image) into the bottom cell of the third column.
    Insert medium1.gif (the "Really Cool Links" image) into the middle cell.
  9. Position the insertion point in the lower-left cell of the main table. Insert large1.gif into this cell.
  10. Click in the left cell in the top row of the table. Choose Table | Select Cell. Shift-click to select the right cell in the second row.
  11. Right-click and choose Cell Properties from the pop-up menu. The Cell Properties dialog box appears.
  12. From the Background Color section, create a custom color of Red 204 Green 204 Blue 255. Choose OK twice to return to the FrontPage Editor.
  13. Position the insertion point anywhere within the table and right-click. Choose Table Properties from the pop-up menu. The Table Properties dialog box appears.
  14. From the Custom Colors section, choose Blue from the Border drop-down menu. Click OK to return to the FrontPage Editor.

When you're finished, your table should look like Figure 11.21. You can assign links to the images in the upper-right portion of the main table, and you can add text to the other cells in the table to describe the things you are linking.

Figure 11.21 : A fancier table with graphics and alignment.

Workshop Wrap-Up

I hope I've started the wheels turning now. I think you can see from what you've learned in this chapter that tables aren't just for data any more. They go a long way in dressing up your pages and can sometimes compensate for using image maps on your pages.

You've covered a lot of ground in this chapter. You learned what tables are and the many ways you can use them. You built a basic table and applied table properties to it. And then, after learning the many ways in which you can format cells, you got a taste of building a more advanced table, complete with graphics. You also learned ways in which you can give your tables a fresh look for those users with Internet Explorer for browsers. Well done-you deserve a hearty pat on the back!

Next Steps

In the next chapter, you'll begin to develop a Web site, using many of the techniques you learned in this section of the book. You'll begin to plan your Web site while developing a welcome screen, home pages, and navigation pages.

For information that relates to this chapter, refer to the following chapters:

Q&A

Q:Are there any other compromises that can be made for browsers that don't support tables very well?
A: One workaround is to build your table as you usually do and then make a screen capture of it while viewing the table in the FrontPage Editor or another browser that supports tables. Insert the graphic of the table onto your page instead of the actual table.
For browsers that don't support graphics or for folks who have graphics turned off, create a text alternative of your table on another page. Use formatted paragraphs or a typewriter font to neatly align the contents of the page. Then, provide a link to the text version on the page that contains your original table.
Q:I inserted a table at the very beginning of my page, and now I want to add text up there. I can't figure out how to do that because my cursor won't go above the table. Help!!!
A:Choose Table | Select Table to select the entire table. Cut it into your clipboard using Edit | Cut or Ctrl+X. With the insertion point at the upper-left corner of the page, paste the table back into your page using Ctrl+V. You should now have a space above the table to add more content.
Q:I'm using a background that puts a really neat design at the left side of my page. I used the Increase Indent button to position my text beyond that border, but some browsers put the text at the beginning of the page over the border. How can I fix that?
A:Put your page contents in a table. Create a table that contains one row and two columns and spans 100 percent of the page width. Create a spacer graphic that is as wide or slightly wider than the design on the left side of your background. This spacer graphic doesn't have to be that tall-even one pixel will do. After you insert the spacer graphic into the left table cell, use the Make Transparent button on the Image Toolbar to add transparency so it doesn't show.
Q:I formatted my tables for 50 percent width and aligned them to the right side of my page. Now I want to put text on my page at the left side of the table, but I can't. What gives?
A:Tables are an entity unto themselves. The table might be formatted to display in a portion of your screen, but the areas to the right and left are also a part of that table. What you can do is insert another table on your page that spans 100 percent page width and has one row and two columns. Uncheck the Specify Width button to expand the columns to fit their contents as necessary. Next, reformat your original table for 100 percent width. Cut or copy it to the clipboard and paste it in one of the cells in the new table. Then, you can add your text in the other empty cell.