Chapter 13

Your Tables Are Ready

• What Makes Up a Table?
• Setting the Basic Table
  • Inserting a Table
  • Setting Table Properties
• Inserting a Basic Table
• Entering Text into Your Tables
• Editing Tables
• Working with Cells
  • Selecting Cells
  • Selecting Rows
  • Selecting Columns
  • Selecting the Entire Table
• Changing Cell Properties
  • Horizontal Alignment
  • Vertical Alignment
  • Creating or Removing Header Cells
  • Specifying Minimum Cell Width
  • Cell Spanning and Merging
  • Splitting Cells
  • Notes on Selecting Split or Merged Rows
  • Inserting a Cell
  • Inserting Rows and Columns
  • Inserting a Table Within a Table
  • Deleting Cells
  • Using Extended Cell Attributes
• Captions-Giving Your Table a Purpose
  • Adding a Table Caption
  • Selecting a Table Caption
  • Inserting an Image into a Table
• Building a Fancy Table
• Workshop Wrap-Up
  • Chapter Summary
  • Next Steps
  • Q&A

We asked for it, and we got it. A welcome addition to FrontPage 1.1 is the inclusion of table support. 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 sleeve-particularly Internet Explorer, which gives you the opportunity to specify different colors for individual cells. The proposed tags for Internet Explorer 3.0 sound even wilder. You'll 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 13.1 shows an example of a basic table.

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

You'll see the following elements:

• Rows and columns: A table usually consists of multiple rows and columns. Rows run horizontally and columns run vertically.
• Cells: Each data field in a table is called a cell, which can sometimes be referred to as a data cell. Cells used for table headings are called header cells.
• Captions: The table caption is a title or description of the contents of the table. Typically, it is located immediately above the table.
• Borders: A table can be created with or without a border. It can appear on all sides of the table or on selected sides through the use of extended attributes.

Setting the Basic Table

You enter a basic table in your page first by choosing the Insert | Table command. This command invokes the Insert Table dialog, 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, or click the Insert Table button on the FrontPage toolbar. The Insert Table dialog shown in Figure 13.2 appears.
   Figure 13.2 : Choose the table settings in the Insert Table dialog.
3. Enter the settings for your table. Each setting is described in the following sections.

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.

Setting Table Properties

The Insert Table dialog enables you to specify the number of rows and columns your table contains. You also can 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, too.

Rows and Columns

You set the number of rows or columns in the Size section of the Insert Table dialog. 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 13.3 shows a table that contains five rows and three columns.

Figure 13.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. This setting is not for the alignment of the contents within the cells; it controls how the entire table is aligned on your page.

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

• Default: Aligns the table to the position that was specified when the table was created.
• Left: Aligns the table to the left edge of your page.
• Center: Aligns the table to the center of your page.
• Right: Aligns the table to the right of your page. Not recognized in some browsers.

Figure 13.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 13.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 13.5 shows the table from Figure 13.3 with a border added. Cell padding and cell spacing are set to 0 in this example.

Figure 13.5 : A border is added to the table.

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

• Enter a value in the Border Size field of the Layout section in the dialog.
• Use the up and down arrows at the right side of the Size field to select a value between 0 and 100 pixels.

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 13.6 to the middle table, which does not use cell padding.

Figure 13.6 : Examples of cell padding and cell spacing.

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

• In the Cell Padding field, enter the number of pixels for cell padding.
• Use the up and down arrows to select a value between 0 and 100. A value of 0 results in cell contents appearing immediately adjacent to its borders.

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 13.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:

• In the Cell Spacing field, enter the number of pixels for cell spacing.
• Use the up and down arrows to select a value between 0 and 100. A value of 0 results in no borders between cells.

Table Width

You can format tables to different widths by using the Width section of the Table Properties dialog. Figure 13.7 shows some examples of different table widths that are center aligned. You set table width in percentage of screen or in pixels.

Figure 13.7 : You can specify a table width other than 100 percent in the Table Properties dialog.

To specify table width, follow these steps:

1. Enable the Specify Width checkbox in the Width section. (It is checked by default.)
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.0 enable you to enhance a table's appearance. Table 13.1 lists these tags. You add these attributes by specifying extended attributes for the table.

To add extended attributes for a table, follow these steps:

1. Position the insertion point anywhere within the table.
2. Right-click and choose Table Properties from the context menu. The Table Properties dialog appears (shown at the left in Figure 13.8).
   Figure 13.8 : Adding an extended table attribute.
3. Click the Extended button. The Extended Attributes dialog appears (shown at the upper right in Figure 13.8).
4. To add an attribute, click the Add button. Add the attribute's name and value (refer to Table 13.1) in the Set Attribute Value dialog. This dialog is shown in the lower right portion of the screen in Figure 13.8.
5. Choose OK to exit each of the dialogs and return to the FrontPage Editor.

Inserting 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 13.9 to try a table yourself.

Figure 13.9 : Insert a table with five rows and three 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 appears.
2. Specify the following settings:
   Alignment: Center
   Border Size: 5
   Cell Padding: 3
   Cell Spacing: 3
   Width: 75%
3. Click OK to create the table.

Entering Text into Your Tables

After you place your table on your page, it's easy to place text, images, bots, or forms into the cells. Start first with a basic text table to learn how easy it is. Enter the text shown in Figure 13.9 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 cell where you want to add content.
2. Enter the text for the cell. You can use any character-formatting options for text in a cell that you can use in any other area on your page.
3. To place content in another cell, position the insertion point into the cell and left-click. You cannot tab to another cell.

Editing Tables

After you place a basic table on your page, you begin to edit the contents in the table. In the process, you can assign different properties to any or all of the cells in the table. You'll run into situations where you might need to add a row or two, reformat widths of cells, align your text differently, and all sorts of other things. Have no fear; it's easy to edit the tables to enhance appearance.

You can edit table properties in the Table Properties dialog shown in Figure 13.10. The basic steps follow:

Figure 13.10: Use the Table Properties dialog to change the settings of your table.

1. Position the cursor anywhere within the table.
2. Right-click and choose Table Properties from the context menu. The Table Properties dialog appears.

All the settings you specified when you created the table can be modified, with the exception of the number of rows and columns. The procedures to modify them are the same as outlined earlier in "Setting Table Properties."

Working with 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 just select 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:

• Place the insertion point in one of the cells in the row you want to select, and choose Table | Select Row.
• Position the insertion point outside the left edge of the table, where it becomes a selection pointer. Click to select the table row. You can drag the arrow to select additional contiguous rows.

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:

• Place the insertion point in one of the cells in the row you want to select, and choose Table | Select Column.
• Position the insertion point above the top edge of the table, where it becomes a selection pointer. Click to select the table column. You can drag the arrow to select additional contiguous columns.

Selecting the Entire Table

You also can apply cell formatting to every cell in your table. To select the entire table, use one of these methods:

• Place the insertion point in one of the cells in the row you want to select, and choose Table | Select Table.
• Move the cursor to the selection bar located on the left edge of your page, where it becomes a selection pointer. Double-click to select the entire table.

Changing Cell Properties

After you select your cells, you use the Cell Properties dialog to change the properties of the cells. This dialog enables you to set the properties of a single cell or a group of selected cells in your table. (See Figure 13.11.) The settings you can choose from are described in the following sections.

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

Horizontal Alignment

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

Figure 13.12: 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 listbox, 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.

Vertical Alignment

You also set vertical alignment in the Layout portion of the Cell Properties dialog. 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 13.12 for examples of these types of alignments.

To specify vertical alignment, follow these steps:

1. In the Layout section's Vertical Alignment drop-down listbox, 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.

Creating or Removing Header Cells

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

Figure 13.13: Header cells enable you to distinguish what the contents of the cells represent.

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

Specifying Minimum Cell Width

Notice that there is a lot of wasted space in the table shown in Figure 13.13. You can specify a minimum width for the cells in your tables. Before you get too deep into this, though, you should know that some browsers ignore cell width settings and automatically size columns to fit the content in the cells below them. If you don't want this to happen, there are ways to work around it, which I'll describe in a bit.

To specify the minimum width of a cell, follow these steps:

1. In the Minimum Width section of the Cell Properties dialog, enable the Specify Width checkbox. (It should be enabled by default.)
2. In the Width section of the dialog box, choose whether you want to specify the width in percentages or pixels.
3. Enter the percentage or number of pixels for the width in the Specify Width field.

It's important to note that the values entered for minimum cell widths are exactly that: minimums. If all the column widths in your table total less than 100 percent, the columns expand as necessary to accommodate cell contents until the table reaches 100 percent width. If all the column widths do total 100 percent, the contents of the cells wrap around as necessary. Figure 13.14 shows a table in which the first and second columns are formatted for 15 percent width, and the last column is formatted for 70 percent width. Notice that the contents of the second column wrapped to accommodate the contents instead of taking width away from the longer row.

Figure 13.14: You can force the table columns to fixed widths by formatting the columns to total 100 percent.

The same rule applies for tables that have a pixel width. If your table was created with a 500 pixel width, for example, format each of the column widths so that their values total 500 pixels. Notice in Figure 13.15 that words too large to display in the column are cut off. The same applies to graphics, so you should coordinate your graphics sizes with the same values you specify in your columns.

Figure 13.15: For tables that specify pixel width, format the columns to equal the same total.

Now for a little oddity. Suppose that you try to get fancy with table layout for graphics. You format the first row in your table as shown here:

Col 1 = 10%  Col 2 = 10%  Col 3 = 10%  Col 4 = 70%

So far, so good: It totals 100 percent. The table should be happy. Let's say for the next row, you format the cells this way:

Col 1 = 25%  Col 2 = 25%  Col 3 = 25%  Col 4 = 25%

Again, they all add up to 100 percent. Will these two rows work together? Well, take a look at the first table in Figure 13.16 to see what happens.

Figure 13.16: Don't combine different cell widths in the same column. Strange things happen.

As you can see, strange things brew up. The table expands to fit the widest cell in each column. The first three columns in the second row take precedence over the three columns in the first row because they are wider. The last column in the first row takes precedence over the last column in the second row for the same reason. So, what you originally hoped would be two rows that spanned 100 percent in different ways becomes a table that is 145 percent wide (three columns at 25 percent plus one column at 70 percent). Note that 45 percent of your table will go off the screen. Situations like this make table layout tedious at times, but you can compensate with cell spanning, merging, or splitting.

Cell Spanning and Merging

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 13.17, and choose the Table | Merge Cells command. The bottom table shows what the cells look like after they are merged.

Figure 13.17: You can merge cells for advanced layout.

Splitting Cells

Splitting cells is the opposite of merging cells. You can split a cell into multiple rows or columns. Figure 13.18 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 four columns, and the second column in the second row was split into six rows. The bottom table of Figure 13.18 shows the results.

Figure 13.18: 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.
3. Choose how you want to split the cell.
   To split the cell into columns, choose Split Into Columns. Enter the number of columns that you want to split the cell into.
   To split the cell into rows, choose Split Into Rows. Enter the number of rows that you want to split the cell into.
4. Click OK. The cells you selected are split as specified.

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? And how do you select the smaller cells to the right of that big cell?

In Figure 13.19, you easily can see how to 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 13.19: Selecting rows after splitting.

As you can see in the top table of Figure 13.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 13.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 originally were there. 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 13.20. And the fifth column is still intact as a column, as shown in the bottom table of Figure 13.20.

Figure 13.20: Selecting columns after splitting.

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. There might be situations in which you want this to occur, 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.

Inserting Rows and Columns

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

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 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 the left or right of your current 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 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 or below the current selection.
5. Click OK to insert the rows.

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. 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 "Setting Table Properties," earlier in this chapter.
4. Click OK to insert the table within the selected cell.

Deleting Cells

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 Del key. To delete the entire table, select it by choosing the Table | Select Table command or by double-clicking in the selection bar in the left margin of your page. The entire table appears in reverse video, and then you can delete it.

Using Extended Cell Attributes

You add extended attributes to cells in a similar manner as described earlier in "Using Extended Table Attributes." Tables 13.2 and 13.3 list 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).

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 context menu. The Cell Properties dialog appears.
3. Click the Extended button. The Extended Attributes dialog appears.
4. To add an attribute, click the Add button. Add the attribute's name and value in the Set Attribute Value dialog. (Refer to Tables 13.2 and 13.3.)
5. Click OK to exit each of the dialogs and return to the FrontPage Editor.

Figure 13.21 shows an example of applying Internet Explorer's BGCOLOR attribute to cells. The attributes were added to each cell individually. When you apply the extended attributes, you don't see the results in the FrontPage Editor (the top table in Figure 13.21). If you view your tables in Internet Explorer 2.0, however, you'll be able to see the results. Check out the bottom table in the figure.

Figure 13.21: Internet Explorer tags as viewed in the FrontPage Editor (top example) and in Internet Explorer (bottom example).

Captions-Giving Your Table a Purpose

Tables don't always have a caption, but, in some cases, they 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.

Selecting a Table Caption

To select a table caption, move the pointer to the left of the table caption. Double-click the mouse to select it.

Inserting an Image into a Table

You insert an image into a table in the same manner you would insert an image onto any part of your page. The only special considerations you really need to remember are that the table columns are sized sufficiently to handle the image. You don't want to insert a graphic that is too big for the column, which is why I recommend sizing your columns for pixels rather than percentage when you apply cell properties. To demonstrate this and the other items I've covered in this chapter, build the fancy table in the next section.

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. Place a heading on the first line that says something like Building a Fancy Table.
2. Insert a new table. Assign it the following properties:
   Number of Rows: 2
   Number of Columns: 2
   Alignment: Center
   Border Size: 5
   Cell Padding: 0
   Cell Spacing: 0
   Width: 600 pixels
3. Place the insertion point in the upper right cell and insert another table. Assign the following properties to it:
   Number of Rows: 1
   Number of Columns: 3
   Alignment: default
   Border Size: 0
   Cell Padding: 0
   Cell Spacing: 0
   Width: 300 pixels
4. From the new table you just inserted into the first table, choose the Table | Split Cells command to split the first and third cells into two rows.
5. 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. You'll want to use the From File option in the Insert Image dialog.
   Insert small1.gif into the top cell in the first row.
   Insert small2.gif into the bottom cell of the first row.
   Insert small3.gif into the top cell of the third row.
   Insert small4.gif into the bottom cell of the third row.
   Insert medium1.gif into the middle cell.
6. Position the insertion point in the lower right cell of the main table. Insert large1.gif into this cell.

When you're finished, your table should look like Figure 13.22. Links can be assigned 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 to which you are linking.

Figure 13.22: A fancier table, with graphics and alignment.

Workshop Wrap-Up

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

Chapter Summary

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 using Internet Explorer for a browser. Well done-you deserve a hearty pat on the back!

Next Steps

In the next chapter, you'll learn about one of the latest hot features of pages: frames. The chapter is aptly titled "Frames-Pages with Split Personalities," because that's exactly what they are. You'll see when you get there.

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

• See Chapter 11, "Sprucing Up Your Pages," for procedures on how to add images to pages. The same principles can apply to tables.
• See Chapter 15, "Automating Pages with Bots," to learn how to place basic bots into your pages. Bots also can be inserted into your tables.
• See Chapter 18, "Adding Interactivity-Forms the Easy Way," to learn how to develop a form. Like any other item on your page, you can insert forms into tables as well.

Q&A