Previous Page TOC Next Page



13


Creating Tables with FrontPage


by William Robert Stanek

Tables are one of the most sought-after features in the HTML specification, and until recently, the Netscape Navigator was the only mainstream browser to support this feature. Yet the Netscape Navigator did much more than merely support HTML tables; it helped pioneer the use of tables in Web publishing. In recognition of this, the current table model used in HTML 3.2 is fully compatible with Netscape's table definition.

Table Design


No doubt you've seen tables in publications, such as those used throughout Microsoft FrontPage 97 Unleashed, and you might have used tables in your own documents as well. In general, tables have a caption and one or more rows of data organized into columns. The columns of data contain individual cells. Each individual cell is either a header or a data set. A table can have several levels of headings, and all headings serve to identify the data sets contained in the body of the table.

After breaking tables into their component parts, the developers of the table model looked at how the data within a table should be displayed by browsers. This was a major area of concern. Web publishers have no direct control over the size of the window used to display a table, which means that table data defined in absolute terms, such as pixels or characters, could easily get obscured or clipped. To avoid this, the developers made it possible to define column width in relative terms as well as absolute terms.

Defining a table in relative terms enables you to specify a size that is a percentage of the current window size. The browser displaying the table sizes the table accordingly, using the currently defined font. The default size for a table is the current window size. If you do not specify a width for your table, the width is set to 100 percent.

The table model is dynamic in other ways as well. You can do any of the following:

The table model has advanced significantly since the first draft of HTML 3.0 and is now a separate specification that has been ratified as a Request For Comments (RFC). In many ways, the current model is more flexible and more powerful. This flexibility and power stems largely from the control you have over the way tables are used in your documents. Figure 13.1 shows a sample table.

Figure 13.1. Tables are powerful additions to your documents.


NOTE

Like most current authoring tools, FrontPage supports the table model set forth in the HTML 3.2 specification, which is a subset of the HTML 3 table model standard. As of July 1996, Internet Explorer 3.0 is the only browser to fully support the HTML table model standard. The full table model allows you to add many extras to your tables, including individual colors for cells and precise alignment of text.



Creating a Table


To insert a table using the FrontPage Editor, select Insert Table from the Table menu. The Editor displays the Insert Table dialog box shown in Figure 13.2. Using this dialog box, you can define the basic layout of your table. In the Size area, you specify the number of rows and columns for the table, and FrontPage determines the number of cells needed to fill the table.

Figure 13.2. Creating the table.

Text in your documents can flow around tables. By default, tables are aligned with the left margin, and text flows around the right side of the table. You can also align tables with the right margin, which causes text to flow around the left side of the table. You can place the table in the center of the page, in which case no text flows around the table. To set the alignment of the table, use the Alignment field in the Layout area of the Insert Table dialog box.

Most tables have a border. To set the pixel width of the border, use the Border field. You can use the value zero as a design technique to remove extra white space around the table.

In terms of the readability of your table, cell padding and cell spacing are the most important attributes you define for the table. Cell padding specifies the spacing within data cells. Cell spacing specifies the spacing between data cells. You specify padding and spacing in pixels as well.

The Width area of the Insert Table dialog box specifies the relative or absolute width of a table. The default width is the current window size. You can specify the width in pixels or as a percentage of the current window size.

Figure 13.3 shows the beginnings of an advanced table. The table includes a caption centered over the body of the table, cells that span multiple cells, and smaller tables within the larger table.

Figure 13.3. Creating an advanced table.

To get beyond the basic table structure you can create with the Insert Table dialog box, you need to use the Table menu and the individual property boxes for table elements. For easy reference, the Table menu is shown in Figure 13.4.

Figure 13.4. The Table menu.

The sections that follow examine how you use each new menu item.

Inserting Rows or Columns


You can always add rows or columns to a table after you've created it. To do this, move the insertion point to the cell in the table where you want to add a new row or column and then select Insert Rows or Columns from the Table menu. This opens the Insert Rows or Columns dialog box.

By default, the dialog box appears as shown in Figure 13.5. With the Rows field checked, you can insert one or more rows either above or below the current insertion point. With the Columns field checked, you can insert one or more columns either to the left or right of the current insertion point.

Figure 13.5. Inserting rows.

Inserting a Table Caption


After you specify how you want the basic components of the table to look, you might want to add a caption to the table. Captions provide an explanation or description of the data sets contained in a table. To insert a caption, select Insert Caption from the Table menu.

By default, the FrontPage Editor moves the insertion point above the table so you can add the caption. You can also place the caption below the table. To do this, you must first select the caption and then open the Table Caption dialog box. You can select the caption by double-clicking in the area of the caption. You know when the caption is selected because the Editor highlights a portion of the caption.

While the caption is selected, you can open the Table Caption dialog box by selecting Caption Properties from the Table menu. This dialog box is shown in Figure 13.6. As you can see, table captions have two basic properties that set their alignment either above or below the table.

Figure 13.6. Setting caption properties.

When adding a table caption, keep in mind that the best captions are short and descriptive. One way to make the caption more readable is to use bold type.

Selecting and Deleting Table Elements


FrontPage enables you to manipulate all the table elements in whole or in part, but you must first select the element you want to manipulate. To do this, move the insertion point to the cell, row, column, or table you want to manipulate and then choose the appropriate item from the Table menu. To select an individual data cell, choose Select Cell. To select a row of cells, choose Select Row. To select a column of cells, choose Select Column. To select the entire table, choose Select Table.

With the table element selected, you can delete it or edit its properties. To delete the table element, press the Delete or Backspace key. You can copy the selected element to the buffer or cut the element out of the table. After the element is on the buffer, you can paste it anywhere in the page, and the FrontPage Editor creates a new table based on that element.

Splitting Cells, Rows, and Columns


After you select a cell, row, or column, you can split it into additional cells, rows, or columns. To do this, choose Split Cells from the Table menu while the table element is selected. This opens the dialog box shown in Figure 13.7. When you are done splitting the table element, click the OK button. Any data in the table element when it is split generally stays in the original cell it was in.

Figure 13.7. Splitting cells into additional columns and rows.

To add rows to the selected area, choose Split into Rows and select the total number of rows you want in each selected element. For example, if you selected one cell and want to add another cell row, enter 2 in the Number of Rows field.

To add columns to the selected area, choose Split into Columns and select the total number of columns you want in each selected element. For example, if you selected one cell and want to add another cell column, enter 2 in the Number of Columns field.

Figure 13.8 shows an example of using split on rows and columns. The first table has two columns and two rows. In the second table, the original first row is split into four columns. This was done by selecting the first row and entering 2 in the Number of Columns field in the Split Cell dialog box. In the third table, the original first column is split into two columns. This was done by selecting the first column and entering 2 in the Number of Columns field in the Split Cell dialog box.

Figure 13.8. An example of splitting cells.

Merging Rows and Columns


After you select two or more rows or columns, you can merge them into a single row or column. To do this, choose Merge Cells from the Table menu while the table element is selected. Now the data that was once split between two or more rows or columns is merged into one row or column.

Resetting Table Properties


After you create a table, you can reset most of its default characteristics at any time. To do this, move the insertion point anywhere in the table and select Table Properties from the Table menu. This opens the dialog box shown in Figure 13.9.

Figure 13.9. Resetting table properties.

The Table Properties dialog box has many of the same elements as the Insert Table dialog box. However, as you can see from Figure 13.9, you cannot change the number of columns or rows from this dialog box. One reason for this is to protect the data cells in the table from accidental deletion.

To set the alignment of the table, use the Alignment field. To set the pixel width of the border, use the Border Size field. To specify the spacing within data cells, use the Cell Padding field. To specify the spacing between data cells, use the Cell Spacing field. You can also specify a relative or absolute width of a table. The default width is the current window size. You can specify the width in pixels or as a percentage of the current window size.

You can check to see what effect individual layout changes make by using the Apply button. Then, when you are sure you like the new layout for the table, click the OK button.

Advanced Property Settings for Cells


In general, two types of cells are used in tables: data cells and heading cells. Data cells contain the numbers, facts, and statements to display in the table. Heading cells contain headings for sections, columns, and rows. When you create a table in the FrontPage Editor, all cells are defined as data cells by default.

Other defaults are assigned to the cells when they are created as well. These settings pertain to the layout, width, and span of each cell. To set new properties for a cell, move the cursor to the cell and then open the Cell Properties dialog box by choosing Cell Properties from the Table menu. This dialog box is shown in Figure 13.10. The great thing about this dialog box is that as you make changes, you can see how they affect the table by using the Apply button. Because this does not close the dialog box, you can then make further changes and test those as well.

Figure 13.10. Setting cell properties.

In the Layout area of the Cell Properties dialog box, you can specify the alignment of data within a cell and whether a cell is a header or data cell. Header cells have different properties from data cells. For example, heading cells are displayed in bold type and data cells are displayed in normal type. Other differences have to do with the alignment within cells. The default horizontal alignment for heading cells in a table is centered. The default horizontal alignment for data sets in a table is the left margin. The default vertical alignment for both heading cells and data cells is middle.

To change the alignment settings, you use the Horizontal Alignment and Vertical Alignment fields in the Cell Properties dialog box. Three vertical and three horizontal alignment settings are available. The vertical alignments are top, middle, and bottom. The horizontal alignments are left, center, and right.

Usually, column width is determined by the number of characters in the first heading or data set in the column. FrontPage overrides this function by specifying a relative width for each column that depends on the number of columns in the table. For example, in a table with two columns, FrontPage generally assigns the relative width of 50 percent of the table size to each column; in a table with three columns, FrontPage generally assigns the relative width of 33 percent of the table size to each column; and so on.

You can override this default with either a relative or absolute value. Relative values are expressed as a percentage of the table size. Absolute values are expressed in pixels. Using relative widths is usually better than using a width based on pixels. It saves you the trouble of trying to ensure that your table is readable and usable regardless of the screen size. It enables you to manipulate an individual column size to fit the user's needs. It also enables you to remove or add columns without recomputing the pixel width. You can set the width of a cell in the Width area of the Cell Properties dialog box.

FrontPage gives you advanced control over the placement of cells within your tables. Usually, cells span only one row and one column, yet by specifying the span of a cell, you can create cells that span several columns or rows. You can set the row span and column span of a selected cell in the Cell Span area of the Cell Properties dialog box.

Both header cells and data cells can span multiple columns and rows. You can use header cells that span multiple columns to create major headings for sections of a table. If a heading spans several columns and you define subheadings for those columns, you need cells that span multiple rows for any columns with only one level of heading. This ensures that the headings and cells line up appropriately.

Advanced Property Settings for Groups of Cells


After you define the individual cells that make up a table, you might want to specify general rules for groups of cells within the table. However, the attributes assigned to a particular cell usually apply only to that cell. If your table has 30 cells, you have to define the properties for each cell, and setting properties for 30 cells one at a time is tedious.

To set properties for multiple cells, move the insertion point to the column or row with cells that you want to set with similar properties. Next, use either Select Column or Select Row from the Table menu and then choose Cell Properties from the Table menu. When you set cell properties, those properties are applied to all selected cells. When you are done setting cell properties, click the Apply or OK button.

Using this technique, you can easily add row and column heading cells to your table. To add a column of header cells, select the column of cells where you want to place headings, and then in the Cell Properties dialog box, activate the Header Cell field. To add a row of header cells, select the row of cells where you want to place headings, and then in the Cell Properties dialog box, activate the Header Cell field. When you are done setting cell properties, click the Apply or OK button.

You can also select cells by row and column using the mouse. To select a row of cells, move the cursor to the left-hand border of the table. When you see the cursor change to a black arrow pointing right, click the left mouse button. To select a column of cells, move the cursor to the top border of the table. When you see the cursor change to a black arrow pointing down, click the left mouse button.

As long as cells are selected, you can select additional cells by moving the pointer into a cell, holding down Shift, and then clicking the left mouse button. Similarly, you can deselect a cell by moving the pointer into a cell, holding down Ctrl, and then clicking the left mouse button.

Adding Color to Your Table


The Internet Explorer has extensions that enable you to add color to your tables. The key to using color in your tables is to use it sparingly. You should test the readability of your text when used with this color. If the text is unreadable, select the text and then change the color of the text using the color property.

Adding Color to an Entire Table


To define colors for an entire, use the Table Properties option on the Table menu. The two areas of the Table Properties dialog box that help you add color to tables are Custom Background and Custom Colors.

Using the Custom Background area, you can select a background color for all data and header cells in the table. The Background Color pull-down list allows you to choose color values. If you use the default value, the color property is set to use the browser default. If you use the custom value, FrontPage displays the Color dialog box.

Using the Custom Colors area, you can add unique border colors to your table. Most browsers display tables using a shading effect around the border. Generally, the top and left sides of the border have lighter shading than the bottom and right sides of the border. This creates a 3-D effect. To define shading for the light border (generally the top and left sides of the table border), select a color from the Light Border field's pull-down list. To define shading for the dark border (generally the bottom and right sides of the table border), select a color from the Dark Border field's pull-down list.

You can remove the shading and use a single border color by selecting a specific color from the Border field's pull-down list. Keep in mind that specific shading overrides the value of the Border field. If you want to use a single border color, set the Light Border and Dark Border fields to the default value. For example, the table defined using the settings shown in Figure 13.11 has a color conflict. Because of this conflict, the Light Border and Dark Border field values override the color value set for the Border field.

Figure 13.11. Color properties can sometimes conflict.

Adding Color to Part of a Table


Using the Cell Properties dialog box, you can add color to individual data and header cells. Select Cell Properties from the Table menu. Like the Table Properties dialog box, the Cell Properties dialog box has two areas to help you add color. The key difference is that for individual cells, the light and dark borders pertain to the inner borders of the cell.

To create a contrast between the shading of the table and the shading of cells, the light and dark borders for cells are reversed. This means the Dark Border field affects the top and left cell borders and the Light Border field affects the bottom and right cell borders.


TIP

You can assign the same color settings to more than one cell. To do this, you must select the cells before you open the Cell Properties dialog box.



Adding Background Images to Your Table


In addition to supporting colors in tables, the Internet Explorer also lets you add images to table backgrounds. If you want to use the image as a background for an entire table, assign the background image using the Table Properties dialog box. If you want to use the image as a background for an individual cell, assign the image using the Cell Properties dialog box.

When you select the Use Background Image checkbox in either the Table Properties or Cell Properties dialog box, the input text field becomes editable. You can then enter the absolute or relative URL path to the background image file. If you do not know the path to the background image, click the Browse button. This opens the Select Background Image dialog box shown in Figure 13.12. To use the Web-ready clip art supplied with FrontPage, click the Clip Art tab.

Figure 13.12. Finding a background image for your table.



As with page backgrounds, the background for your table should be in GIF or JPEG format.


Figure 13.13 shows how you can use background images in tables. When you combine unique page colors or backgrounds with a table that has backgrounds, be sure to check the table for readability. The table shown in the figure worked great against a white background. Yet when the page color was changed to black and the text color was changed to white, a conflict occurred in the readability of the table. To correct the readability problem, text within the table was changed to black.

Figure 13.13. Using background images in your tables.

Combined Table Example


Combining the various table creation and design techniques discussed throughout this chapter is easy. Figure 13.14 shows how the first section of a table created to show how browser support for table tags and attributes could be turned into an HTML table. The key concepts of using column and row headers, setting alignments for columns and rows, and column and row spanning are used in the example.

Figure 13.14. A well-designed table.

Tables can be a powerful addition to your documents. Use the example as a guideline for creating well-designed tables. The design concepts that went into making the table were simple, but when combined, they created a more powerful table. Cell padding and spacing increase the white space in the table and ensure that the data does not touch the cell walls.

Headers and subheaders were used for columns. Headers were used for rows. The first letter of the table data was capitalized to enhance the readability of the table. Key table entries were left aligned, and their associated attributes were centered.

Summary


Tables are one of the most dynamic elements ever added to the HTML standard. With FrontPage, you can quickly and easily create powerful tables with precisely controlled layout. Most tables have a caption and one or more rows of data organized into columns. The columns of data contain individual cells. Each individual cell is either a header or a data set. Although a table can have several levels of headings, all headings serve to identify the data sets contained in the body of the table. Use tables to add pizzazz to your Web pages!

Previous Page Page Top TOC Next Page