FrontPage Web Design banner.

Tables | Cells

Tables

Tables can be used for
formatting text and pictures or for providing data.  If you use tables to provide data, be sure to place the column or row labels within the first row or column of the table to meet web accessibility standards.  You can also place the title of the table in the first row and the column and/or row headings in the second row. 

Student Textbook Savings

Textbook Original Cost Sale Price
How to Maintain a Database $45.98 $35.49
FrontPage 2000 $89.50 $70.50

You can change the border, padding, spacing, shading, and width of a table by right-clicking on the table and selecting Table Properties.  In the example below, I used Center for Alignment, 650 pixels for Table Width, 6 for Cell Padding, the space between the cell border and the text, 0 for Cell Spacing, space between cells, 1 for Border, and pale gray for the Background color. If you select 0 for the border width, you will not see any border lines – this is a good way to format text without the appearance of having used a table. 

Although in this example we selected the width of our table to be pixels, it is better to to use a percentage.  If you set a table width to 700 pixels and the user only has a browser width of 640 pixels, the table will be too large to view.  If you select a percentage, FrontPage will adjust your the table to fix within the width of the browser screen.

Setting table properties.

Student Textbook Savings

Textbook Original Cost Sale Price
How to Maintain a Database $45.98 $35.49
FrontPage 2000 $89.50 $70.50

If you want your table to appear smaller and right aligned, you would select Right for Alignment, Right for Float, and 60% for Table Width.

Setting table properties to align to the right and wrap around text.
 

Student Textbook Savings

Textbook Original Cost Sale Price
How to Maintain a Database $45.98 $35.49
FrontPage 2000 $89.50 $70.50

By selecting the right alignment and right for float, you can wrap text around your table. This is a very useful feature when using tables.  This allows the person reading the information to see the text and the table data at the same time.  This method will automatically wrap text around the table.


Tables can contain pictures or use a picture for as its background.  To create a table with a picture background, select Table Properties and check Use Background Picture.  Browse for the source destination of the picture.
 

 

Here is a table that is using a picture as its background instead of color.

 

This is a good way to make a banner for your web page or just add some flavor to an existing table.


Formatting Cells

You can change the background color, width, height, shading, and alignment of a cell or row of cells by right-clicking on the cell and selecting Cell Properties.  For example, you can select bottom, middle, or top for the cell’s Vertical Alignment, change the Background and Border Colors. This is useful if you really want your data to stand out and be noticed.

Cell properties dialog box.
 

2001 2002 2003
678 1003 987
598 963 1025

Web Design Tips | ADA Standards | Design Tools | Local & Live Sites | Browser Compatibility | Creating a Home Page | Text | Tables | Hyperlinks | Pictures | Spell Checking | Forms | Search Forms | Discussion Webs | Meta Tags | Resource Links | Lesson 1 | Lesson 2 | FrontPage Booklet | Home |