Table Uses

On web pages, tables can serve many functions:

  • Page layout
  • Displaying information in formatted tabular form
  • Adding background color and borders to blocks of text

Creating a Table

A quick way to create a small table is using the table button on the standard toolbar. Click the button and drag the mouse over the grid, highlighting the cells that should appear on the table. When the table size has been selected, click the mouse button again.

[Creating a Table example]

A table outline with 2 rows and 2 columns will appear on the page:

[Empty table]

Table Properties

Select Table|Properties|Table from the menu border to modify the table's properties.

[Table Properties window]

  • Alignment refers to the table's position on the page, not the alignment of the text within the table. Choose "Center" to center the table on the page, or select left, right, or justify. Default is usually left alignment.
  • Cell padding is the number of pixels between the text and the cell walls.
  • Cell spacing is the number of pixels between the table cells.
  • Specify width sets the width of the table by a distinct number of pixels or by a percentage of the screen width.
  • Specify height is usually not necessary to set since the height depends on the number of rows in the table.

    The following table was produced by the settings shown in the window above.
    [table example]
  • Border size indicates the depth of the table border. The dotted lines on the table above are shown only as a visual reference of the table structure, but since this table's border is set to 0 pixels, no borders will show on a web page:
    [table example]
    Below is the same table with a border set to 5 pixels:
    [table example]
  • Border color will change the color of the borders on the table. The MSIE and Netscape browsers read this property differently. MSIE changes all the border to the solid color, while Netscape keeps the three-dimensional quality of the table and only changes the outer border of the table. Since FrontPage is a Microsoft product, you will always see the MSIE version when constructing a web page in FrontPage.

    Microsoft Internet Explorer 5.0 Netscape Navigator 4.7
    [table example] [table example]

  • Light border and dark border change the highlight and shadow colors of the table. Be aware that these attributes are not read by Netscape. Light and dark borders of red and green were added to the table, but notice that the Netscape table is still blue:

    Microsoft Internet Explorer 5.0 Netscape Navigator 4.7
    [table example] [table example]

  • Background color adds a background to the table cells. MSIE will add the color to the background of the cells and the space between the cells while Netscape only adds the color to the background of the cells:

    Microsoft Internet Explorer 5.0 Netscape Navigator 4.7
    [table example] [table example]

  • Use background picture will add a background image to the table and again, there are differences between browsers. MSIE will repeat the image over the entire background of the table while Netscape repeats the image in each cell:

    Microsoft Internet Explorer 5.0 Netscape Navigator 4.7
    [table example] [table example]

Cell Properties

Select Tables|Properties|Cell from the menu bar or Cell Properties from the shortcut menu to change the properties of the table cells. Begin by highlighting the cells whose properties will be changed.

[Cell Properties window]

  • Horizontal alignment is defaulted to the left side of the table cell. Change this attribute to center or right-justify the text within the table cell.
  • Vertical alignment is defaulted at middle as shown in the example below. Since the text in the right-hand column cover more than one line and the left-hand cells do not, that text is centered vertically in the cell. Select "top" or "bottom" to override this default setting.
    [table example]
  • Setting rows spanned and columns spanned is better achieved by a method explained below.
  • Specify width and specify height will set the width and height of the cells. Percentages refer to the portion of the table, not a percentage of the entire screen.
  • Select Header cell to automatically bold and center the content of the cell.
  • Border color is a setting that is not read by Netscape. This changes the color of the cell border only when viewed with MSIE. Note the red borders on the cells in the top row of the MSIE example:

    Microsoft Internet Explorer 5.0 Netscape Navigator 4.7
    [table example] [table example]

    Light and dark border settings will additionally be read by MSIE but not by Netscape.

  • Background color changes the cell's background color. In Netscape, this is the same effect of setting the entire table's background color since the color is not added between the cells.

    Microsoft Internet Explorer 5.0 Netscape Navigator 4.7
    [table example] [table example]

  • Background image adds a graphic to the background of each cell. In Netscape, this is the same effect as setting the background graphic for the entire table since it begins a new repeating pattern for each cell.

    Microsoft Internet Explorer 5.0 Netscape Navigator 4.7
    [table example] [table example]

Inserting Rows and Columns

Quickly add rows or columns to a table by placing the cursor in the cell the new row or column will be adjacent to, right-click the mouse to access the popup shortcut menu, and select Insert Row or Insert Column. Another method is to use the Insert Rows or Columns dialog box:

  1. Place the cursor in a cell where the new row or column will be adjacent to.
  2. Select Table|Insert|Rows or Columns from the menu bar.

    [Insert Rows or Columns window] [Insert Rows or Columns window]

  3. To insert a row, select Rows and enter the Number of Rows. Then select the Location of the new row by selecting Above selection or Below selection from where you placed the cursor in step 1.
  4. Click Columns to insert a new column and the choices will change. Enter the Number of columns and the Location left or right of the selected point.
  5. Click OK.

Spanning Cells

There is often the need to create a cell than spans rows or columns, such as the a title at the top of a table. This example will begin with the same table already used on this page.

  1. Insert a new row to the top of the table.
  2. Type the text of the row that will be spanned across the columns by typing into the first cell and highlight the cells as shown below:
    [table example]
  3. Select Table|Merge Cells from the menu bar or right-click with the mouse and select Merge Cells from the popup shortcut menu..
    [table example]
  4. Center the text in the cell by from the Cell Properties window and deselect the cell.
    [table example]
  5. To split the cell again, select the cell and choose Table|Split Cell from the menu bar.