MS FrontPage 2000 Tutorial

Tables are used much more in web pages than in normal word processing. It's important to understand the many ways tables can be manipulated and controlled.

Table properties effect the entire table, while Cell Properties effect only individual cells.

If you set cell properties the way you want them in the first row of a table, when you add new rows, the same properties will be copied to the new cells. Therefore, it's a good practice to start out with a table of one row by however many columns you need, set the cell properties, then use the tab key to add subsequent rows.

To create a table:       

1. Click and hold the "Insert Table" icon on the Standard Toolbar
2. Use the mouse to select the number of rows and columns you desire
3. Release the mouse button and your table will appear on the page.

Table properties

Layout settings:

• Alignment determines the placement of the table on the page: left, right or centered.

• Float determines if content outside of the table can wrap around it. If you float the table "left" then other contents (text graphics) will wrap around the right side of the table. Vice versa for float "right." The "Default" setting does not allow for wrapping.
• Cell padding and cell spacing determine the amount of space, measured in pixels, between the contents of cells and the border. Increase these values to add a buffer between borders and text or graphics for increased readability.

 

Size settings

The size of a table can be controlled either in exact pixel values, or the relative percentage of a browser window. There are advantages to each, depending on the application. In many cases it is desirable to not specify any size, but let the table adjust to the size of the content within it.

You can adjust these values as needed, but here are a couple suggestions:

• The minimum size of a monitor screen is 640 pixels wide by 480 pixels high. Most users expect to do some vertical scrolling, but find it annoying to have to scroll side to side. It is standard practice among Web designers to make tables no wider than 600 pixels, unless you are reasonably certain that your audience will be viewing the pages on higher resolution monitors (i.e. 600x800, 1024x768 or 1280x 1024). For reference, the majority of monitors on UO/E desktops are set to 640x480.

• Similarly, when specifying width by percent, don't go over 100% or the user will have to scroll side to side.

Border size determines the thickness of the table border. If you set it to 0, the table will not be seen in a Web browser, but will appear as a dotted line in the editor. This is especially useful for laying out your page with columns.  

Tables are often used for complex table layouts. You can nest tables within tables, but you have to be very careful of the size settings so that they do not conflict -- such as trying to force an internal table  to be larger than the container table.

Custom Background and Custom Colors

You can change the background color and border colors for your entire table here. Background colors in tables are supported in browsers since Netscape 2.0. There are still older browsers in use, however, so be careful not to use text color for your table that is the same as your page background color. An older browser might end up displaying white text on white background, for example.

Caution:

The "Style" button on the Table Properties screen implements features that are only supported currently in MS Internet Explorer 4.0. I strongly suggest that you DO NOT use this section until it becomes more widely supported.

Cell Properties

Layout

Horizontal Alignment and Vertical Alignment settings control the alignment of text and graphics within a cell.

If you place a check in the box next to NOWRAP, the contents of the cell will not wrap to fit, but force the table to expand if necessary to fit the width of the contents.

Minimum size

As in the table properties, you have the choice of specifying the size by pixels or percent. However, this setting will only effect the one cell you are addressing, or the row/column of cells that you have selected. In addition, the percent measure here indicates a percentage of the table width, rather than a percentage of the browser width.

All cells in one row must be the same height, and all cells in the same column must be the same width. Setting a width for the top cell in a column will force all the cells directly below it to have the same width. Setting a height value for any one cell in a row will force the rest of the cells in the same row to have the same height. You do not need to set width for every cell in a column or the height for every cell in a row.

If you assign percentage values to widths of cells in a row, they should not total more than 100%. If they do, you will get unpredictable results, as different browsers handle this situation differently.

If you set a width for the entire table, you can set width values for some or all cells, but it is not required. If no values are set, the widths will vary according to the size of the content within them.

Cell span

Sometimes you will want larger cells in your table. You can achieve this by "spanning" a cell across two or more columns or rows.

This cell is spanned across 2 rows.
	This cell is spanned across 2 columns

NOTE: You can use the "Draw Table" tool and the "Eraser" tool on the Tables toolbar to change the spanning of your tables.

  

Custom Background and Custom Colors

Here you can set background and border colors that only effect one cell or the currently selected row/column of cells.

Caution:

The "Style" button on the Table Properties screen implements features that are only supported currently in MS Internet Explorer 4.0. I strongly suggest that you DO NOT use this section until it becomes more widely supported.

Notes about tables: FrontPage allows you to adjust the size of tables and cells graphically by grabbing the borders with your mouse and dragging them. However, when you look at the table properties and cell properties after doing this, you may see that it set the sizes to exact pixel widths and heights. This is usually not desirable, as for most situations you want the table to adjust automatically for the size of the browser window. You can use tables for designing complex Web pages that divide the space into columns or other regions. FrontPage comes with some example templates for doing this. Click FILE --> NEW… and choose a layout such as "One-column Body with Contents and Sidebar" to get some ideas. When doing a layout such as this, it's good practice to turn the table border off so it doesn't distract the users' eye from the content of the page.

 

-------- Do Exercise 6 -----

 

Previous | Home | Next

Kate Akers, kate@oseda.missouri.edu Webmaster, University Outreach and Extension Last modified: 08/27/02