E-mail this pageUsing Tables
There are times when the information you'd like to convey can only be expressed in a tabular form; at those times, you'll find that creating a table on a web page is a relatively straightforward process in FrontPage. Before you do so, though, you should carefully consider that tables can interfere with the acessibility of a web page. As a rule, you should avoid using tables for layout purposes.
Creating a Table
Begin by clicking on the table icon (
). 
This will open up a grid which allows you to select a range of cells corresponding to the table you wish to create. Drag down and to the right on the grid to select the number of cells in your table.
Once you release the mouse button after making your selection, your table will appear on your page.
At this time, you can fill the table with graphics, with text, with other tables, or any combination of these elements.
It bears mentioning that the Table menu affords you a number of options, including merge cells , which makes a single cell out of adjacent cells, and split cells , which allows you to split a single cell into several rows or columns.
Right-clicking on any cell in the table introduces a popup-menu offering you the options of altering the properties (alignment, color, background) for any given cell (Cell Properties) or for the entire table (Table Properties ).
Table Properties
The Table Properties dialog (right-click on the table and select Table Properties) allows you to set a number of options that concern the table as a whole.
The Alignment field specifies the alignment of the entire table, not the alignment of text or graphics within the table's cells. The Default setting aligns the table to the left margin (or to the position stipulated in the page's style sheet, if available). Setting the Alignment field to Right has the effect of aligning the table to the right margin; Center centers the table on the page; Left aligns the table to the left margin.
The Float field allows you to dictate whether text should flow around the Left or the Right side of the table. The Default setting disables all text wrapping--the table has text above it, and text below it, but no text beside it. It's a good idea to leave the default here, for much the same reason as it's a good idea not to rely on the align property with images: the automatic wrapping of text can have some unforeseen and, let's be honest, ugly results.
The Cell Padding field lets you set the amount of space between a cell's contents and the inside edge of that cell. Similarly, the Cell Spacing field lets you set the amount of space between one cell and the next.
The Specify Width and Specify Height fields are a little tricky. If you do not specify width or height, then the table will be just as large as it needs to be to contain the information you put into it. This is usually the preferred setting, but it isn't the default: to remove the width/height specifications, remove the checkmarks from the boxes marked Specify Width and Specify Height .
If, for layout or design reasons, you want to specify the width of the table, you'll find yourself running headlong into the obscure realm of measurements:
- 600 pixels is a precise measurement of pixels, but it will occupy a differing amount of space depending on the screen resolution being used by the visitors to your page. A visitor with a screen resolution set to 640X480 will find that 600 pixels fills almost the entire screen; a visitor with a screen resolution set to 800X600 will find that the same 600 pixels fills only 3/4 of the screen; a visitor with a screen resolution set to 1024X768 will wonder why your table is just over half a screen wide.
- 100% is a relative measurement of the available viewing area and is a little more stable: no matter what screen resolution the site visitor may be using, the table will always occupy 100% of that viewing area. Unfortunately, Netscape and Internet Explorer define that viewing area differently. Internet Explorer uses, reasonably enough, the available space within the margins that have been set for the page. Netscape uses, mysteriously, the available space on the entire page. Hence, on a page that has 10% left and 10% right margins, Internet Explorer will interpret a table width of 100% to fill the space within the margins, but Netscape will use the same table width to draw a table that begins at the left margin but then extends 10% past the right margin of the page.
As a rule, you're better off relying on percentage values than pixel values, but the difficulty of working with the width/height settings of tables is often greater than the rewards that might come from doing so.
The Borders and Background sections of the Table Properties dialog are sufficiently straightforward to preclude explanation, but they do warrant 2 small notes:
- older versions of Netscape (3.x) will always put a border on tables, whether you specify a border width of zero or not.
- a background image will always wrap in a table: this produces genuinely ugly results most of the time. As a rule, don't use background images in tables.
Cell Properties
Whereas the table properties govern the entire table, the cell properties effect only a particular cell. To set a cell's properties, right-click on that cell to introduce the Cell Properties dialog.
In the Cell Properties dialog, the Horizontal alignment field allows you to set the alignment of the contents of the cell: your options include left , right , center , and justify .
The Vertical alignment field lets you adjust whether the cell contents should appear at the top of the cell, in the middle , at the baseline , or at the bottom .
The Rows spanned and Columns spanned fields allow you to specify whether a cell should run across multiple columns or rows.
The Header cell should be specified for those cells which contain heading information--usually this information will be found in the first row and first column of a table. Specifying header cells for tabular data helps to make your table meet accessibility standards. In the example below, the green cells with the yellow borders are all defined as header cells.
| 1997 | 1998 | 1999 | |
|---|---|---|---|
| Number of web workshops | 0 | 8 | 12 |
| Number of faculty websites | 5 | 25 | 70 |
The Borders and the Background options in the Cell Properties dialog behave just as they do in the Table Properties dialog, but in the Cell Properties dialog, they have an effect only on the selected cell or cells, and not on the entire table.
Tables are a little difficult to master, but you'll find that with a little practice, most of the table functions will become routine. Just remember to right-click on the table or on a cell when you need to do something with it, and don't forget that there's a menu item reserved exclusively for tables.
Tip: If you're doing a lot of work with tables, you might want to activate the table toolbar: select View|Toolbars|Table to add the toolbar to your screen.
Using Tables for Layout
One final use for tables is in layout--tables can align and arrange web page elements in a more elegant and ambitious way than most other plain HTML mechanisms. Before you consider using a table as a layout tool, you should carefully consider the accessibility implications: automatic text-readers will approach your table reading left to right, and top to bottom. Merged table rows can create a page that simply makes no sense to the automatic text-reader, defying the left-to-right, top-to-bottom progress. The following example illustrates a nightmarish situation for a text-reader:
| Merged rows | Merged columns | |
| Single cell | Merged rows | |
| Merged columns | ||
While the example above might provide an interesting layout, it defies line-by-line reading.
The example below is better:
| Single Cell | Single Cell | ||
| Merged Columns | |||
| Single Cell | Single Cell | Single Cell | |
In this example, a line by line reading is possible: there's a clear progression from left to right, and top to bottom.
As a rule, you'll want to minimize your use of tables for layout purposes. If you do use a table for layout, think carefully about how this table would be interpreted if read aloud. The exercise on page-menu creation (in the next section of this website) will illustrate both how a table can be used responsibly, and how an alternative can be devised.
Comments or questions? Please contact Dr. Peter Friesen , Instructional Technology Coordinator, Plattsburgh State University.