Building a Web Site
of Your Own

Tables with FrontPage: creating, customizing, & editing

A "table" is a grid of rows (across) and columns (down) used to organize information in a web page. Just as a list can be used to set several items apart from paragraphs of text, a table can make items stand out. But it can also do so in less space by allowing multiple columns. Here are some tips for creating tables using FrontPage Editor. For this section, try each of the experiments to check how things really work! Return to Session 3 when done looking at tables.

Make a table:

Select "Insert Table" from the Table menu - click and drag the mouse across and down on the "table graphic" that appears to indicate the number of rows and columns desired. Another way to do this is by clicking the "Insert Table" button on the tool bar or A dialog box will appear - enter the number of rows & number of columns. Click "OK". Note some of the additional menu choices allow us to "select" cells, rows, columns for editing - these will come in handy later.

An alternative method for placing a new table in a page is described below.

Draw a table using the menu choice allows us to specify the dimensions (width and height) using a pencil-like tool. Select "Draw Table" and drag from the upper left corner of the desired location for the table to the lower right corner. A single cell table appears. Then, use other choices under the Table menu to modify the table by adding row and/or column divisions within the defined boundaries for the table. This is a great technique when you have a good idea what the table should look like and don't want to guess how many pixels wide to make it, etc.

Get rid of a table after first clicking someplace on the table with the mouse. Choose "Select Table" from the Table menu. Hit the Delete button or select "Cut" from the Edit menu.

Customizing overall dimensions may be done by selecting "Table Properties" from the Table menu while the desired table is active (the cursor is in the table or part of the table is highlighted). A dialog box appears (this also appears when using the first method above for creating a new table). It is possible to specify table width as a fixed number of pixels (dots across the screen - old screens were 640 dots wide) or as a percent of the screen width. Also, width of borders, spacing around cell contents, etc. are adjustable here:

tableprop.JPG (21564 bytes)

The adjustments in table properties in FrontPage 2000 may be modified via the dialog box shown at right. Additional features in FrontPage 2000 include adjusting the color and shading of the borders around a table. It is also possible to include a background color or picture for a table. Note that specifying table or cell width as pixels MAY make the table not fit in the window available on the viewer's browser.

Cell properties may be used to change the alignment of the contents of a cell both horizontally (left to right) and vertically (top, middle, and bottom).

Customizing column width within a table is easy in FrontPage. Select the table. Move the mouse over the bar separating two columns and the mouse changes to a left-right arrow. Click and drag to widen or narrow.

Merging two cells (or more than two cells) may be done by selecting the cells to be merged and then choosing "Merge cells" from the Table menu. The results will be different when Deleting a cell from a row. Instead of a wider space for the remaining cells, an empty, unsuable space in the table will result. The sample table below exhibits a few of these features of customizing, merging, and deleting cells.

This is the percentage width cell.	Text is vertically aligned.
This is single cell which results from merging two cells.		A cell has been deleted next to this one.

Additional features:

Sometimes it is desirable to have one row of entries in a table act as headings for the columns. This creates cells with automatic heading formatting (centered, bold).

Notice that the Table menu allows us to insert a new row, column, or cell if we decide to change the dimensions of the table.

Colors & Backgrounds:

From the Cell Properties menu, it is possible to designate a background color for any cell or an entire table. This may be useful to make table rows more contrasting, add visual interest to a page, or serve a real organizational purpose for content. A background image may be selected and by clicking "More Colors", the entire palette of web safe colors will be displayed for color selection.

Finally, a table may be made invisible (a technique used to allow a table to organize text and graphics with greater control) by making the border size = 0 in the Table Properties window. In this course, all side-by-side displays of text and graphics are arranged using tables. If no table is visible, it probably has a border size of 0.

[Session 1] [Session 2] [Session 3] [Session 4] [Session 5] [HomePage Overview] [Top]
This site copyrighted (2005) by Dr. Blake West - Please credit when linking to the site!
Kansas NEA - 715 SW 10th Ave. Topeka, KS 66612.