Using Tables for Page Layout

Besides the obvious use of tables as tables, tables can be used to layout and position items on your page. If you don't know how to do tables in FrontPage 97, see the FP Tables page.

Centered Column

One of the simplist layouts is what I used for the page in the Contents Frame. Start with a single column multi-row table.

Using the Table Properties notebook, set the Alignment to Center. Then select the column of the table (all cells), and open the Cell Properties notebook, set the Horizontal Alignment to Left, and the Vertical alignment to Top.

All In A Row

This example shows how to align items on a single row. Create a 1 row, 5 column table.

Here is the finished effect. I added my links, and set the cell properties of the middle cell as follows:
Horizontal Alignment: Center
Vertical Alignment: Bottom

Two Columns

This example shows how to put multiple columns of text on a page. Create a 1 row, 3 column table.

Using the Table Properties notebook, set the Alignment to Center. Then select the row of the table (all cells), and open the Cell Properties notebook, set the Horizontal Alignment to Left, and the Vertical alignment to Top. Then using the Cell Properties notebook on each individual cell, check the Specify Width check box, select the In Percent radio button, and set the sizes of the three cells to 45, 10, 45 respectively.

Fourscore and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation or

any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

As you can see, this isn't the best for flowing text from one column to another. But, if you have 2 distinct columns of text, it works well. As an alternate use, if you put an Image in each cell, this is an easy way to align images on a line.

My Home Page

My home page, is just a variation on the Two Column display above. Notice how I aligned the text on the background image, this was done by fixing the sizes of the first 2 columns. As an example, start with the same left aligned table with 3 cells:

Cell 1
Horizontal Alignment	:	Center
Vertical Alignment	:	Top
Minimum Width	:	60 Pixels

Cell 2
Horizontal Alignment	:	Center
Vertical Alignment	:	Top
Minimum Width	:	20 Pixels

Cell 3
Horizontal Alignment	:	Center
Vertical Alignment	:	Top
Minimum Width	:	none

Banners Before the Table

V
E
R
T
I
C
A
L

Link Number One

Two

Three

Table Crazy

My Links and ScrapBook pages, are laid out by puting tables within tables. First I started out with the same 3 cell left aligned table, setting each cell to Left, Top alignment.

In the first cell I inserted a multi-row, 6 column table, and set the background color.

In the third cell I inserted a 3 row, 1 column table. I also set the background colors of cells to give the tabed effect of the index table in the first cell.

Note: I added some line breaks and a period to the bottom row, to stretch the left border. The period was put after the line breaks so FrontPage dosn't delete the line breaks. To hide the period the font color can be changed to match the border color of yellow.


			Jeffs Junk Garage

			ScrapBook
			Page 1
			Page 2
			Page 3


			.

Gettyburg Address

Fourscore and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation or

[Home] [ScrapBook] [Chat] [Links] [Contact] [FrontPage]

To get the Gettysburg address, all I did was put the cursor in my previous example, then selected the menu items Table/Select Table, Edit/Copy, then I moved the cursor back into the body cell of this table and did an Edit/Paste.