IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV

 

 

FrontPage 2003 Basics—Tables

Tables are useful to organize information. They are especially beneficial in creating the appearance of multi-columned text. There is no way to "tab" in HTML and you should avoid using the Space Bar to control spacing since that will result in a Web page that looks good to your reader only if he/she has the same computer settings as you do. The alternative is to create a borderless table. Simple tables are easy to create; however, it has been my experience that creating or editing a complex table may require direct HTML tag manipulation.

Creating a Table

To insert a table:

  1. Click the Insert Table tool, screen image: Insert table icon.

  2. Press and drag the Table Size pop-up box (see example below) to select the number of rows and columns you want in your table. When you release the mouse button, a table of the proportions selected will display in your document.

screen image: table size dialog box

Table Size Dialog Box

NOTE: It is best if you can decide ahead of time the number of columns—it will save you a step during development.

The table will show on the Web page during development with dotted lines (see example below) so that you can more easily work with the table. The dotted lines indicate that the lines will NOT display on the Web.

screen image: sample table grid

Sample Working Table Grid

Working with Tables

NOTE: Any time you wish to work with a table, you must click within the table to place the cursor inside the table. Otherwise, you will find that the Table menu options are "grayed out" and unavailable to you.

To adjust the column widths and row heights, point your mouse at the border you wish to adjust. Move the mouse very slowly until you see the cursor change to a double headed arrow (it's quite sensitive; move it slowly), then press and drag to the new dimensions.

To enter data into the table, click your mouse cursor in a cell and begin typing.

To move from cell to cell, press the <TAB> key on your keyboard or click the mouse cursor in the cell to which you want to move.

To add an additional table row at the end of the table, position your cursor in the lower, right corner cell and press the <TAB> key on your keyboard.

To select a table/column/row/cell, click in the row or column that you wish to select, then from the menu choose TABLE : Select : Table/Column/Row/Cell (whichever one you wish to select).

To insert a row or column, click in the row or column beside which you wish to make an insertion. From the menu, choose TABLE : Insert : Rows or Column. From the dialog box, select either row or column. The example below has Columns selected; therefore, the Location indicates a Left of selection or a Right of selection insertion option. If Rows had been selected, the Location would have adjusted to show Above or Below options.

Screen image: insert rows or columns dialog box

Insert Rows or Columns Dialog Box

To delete individual cells, complete rows or complete columns, position your cursor in the appropriate location (in the cell, in the row, or in the column), then select the element (as previously described) that you want to delete. After the element is selected, from the menu, choose TABLE : Delete Cells.

To merge cells, select the cells as previously described, then from the menu, choose TABLE : Merge Cells.

To split cells, place the cursor in the cell you wish to split. Then from the menu, choose TABLE : Split Cells. In the dialog box (see example below), choose to split the cell into columns or into rows, and specify the number of columns or rows you wish.

Screen image: split cells dialog box

Split Cells Dialog Box

Table Toolbar

Screen image: table toolbar

Table Toolbar

The Table Toolbar gives you easy access to many of the same functions that you can perform through the Table menu. Depending upon how the FrontPage options are set on your computer, the Table Toolbar may display anytime you are working with tables. If it doesn't and you want it to, from the menu choose VIEW : Toolbars : Tables.

In addition to the table functions that you can access through the menu, you can:

To "turn off" either the pencil or the eraser tool, press the <ESC> key on your keyboard.

Table & Cell Properties

You can set table properties such as background and border colors, spacing, and text alignment in the Table Properties. Make sure that your cursor is within the table. From the menu, choose TABLE : Table Properties (see example below).

Screen image: table properties dialog box

Table Properties Dialog Box

In the Table Properties dialog box, you can make many choices about the table, but there are only a few that you will normally need to do anything with:

This table has cellpadding of 15 pixels
and cellspacing of 0 pixels. Notice how far the words are from the edge of the cell.

 

This table has cellpadding of 0 pixels
and cellspacing of 15 pixels. Notice the width of the cell walls and how close to the cell walls the text is.

To control cell properties such as text alignment within the cell and cell background color, make sure the cursor is within the cell whose options you want to set. Then from the menu, choose TABLE : Cell Properties.

One of the more important options in the Cell Properties is the cell vertical alignment. Notice in the example below how much easier it is to read the contents of the second row (that is top aligned) than to read the first row that has the default, middle alignment:

This cell has very little information. This cell has multiple lines of information. Notice how the cell on the left is centered, vertically, making the table contents somewhat difficult to read.
   
This cell has very little information. This cell has multiple lines of information. Notice how the cell on the left is aligned at the top, making the table contents easier to read.

 

HomeReturn Home

alid HTML 4.01 Transitional Valid CSS