MS FrontPage Tutorial -- University Outreach and Extension

Tables

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. Here is a basic 3x1 table:

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.

• 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.

• 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.

This table has these settings:

Alignment = center Float = default Border Size = 1 Cell Padding = 5 Cell Spacing = 3 Width = 50%

Minimum 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.

Try resizing your browser window to see the difference between a table with an exact pixel width setting and one with a percent width setting.

Custom Background and Custom Colors

If you want to use a background color or background image within your table, specify it here. This adds a nice effect to highlight your table, whether you are using borders or not.

Note: There is a place in "cell properties" to specify background colors as well, however as of this writing (2/98) it does not work well in all browsers. Most current browsers (since Netscape 2.0 and MSIE 2.01) will honor background colors and images in table properties, but not necessarily in the cell properties. So, if you're going to add colors, do it here.

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 nest 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. 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.

Custom Background and Custom Colors

As mentioned above, most current browsers do not honor these values when set for individual cells. We recommend that you do not use this feature until it is more widely supported.

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 will allow you to adjust the size of tables and cells graphically by grabbing the borders with your mouse and sliding them around. However, when you look at the table properties and cell properties after doing this, you will see that FP 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 standard practice to turn the table border off so it doesn't distract the users' eye from the content of the page.

Previous | Home | Next

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