the complete webmaster
tutorials reviews reference
ASP
CGI
FrontPage
HTML
Java
JavaScript

home / articles / frontpage

Tables, the HTML Formatting Solution

A lot of people who are new to HTML have problems with formattimg their pages, not surprising, as FrontPage is an HTML editor, not a Word Processing program, much as it seems to behave like one.
For example, let's say you wanted to place an image (like the one at the right of this paragraph) in between 2 columns of text, as I've done here. Well, even in a Word Processing program, this would probably necessitate the use of tables. However, tables in HTML are a bit different. HTML tables are a bit more limited in their function. However, you can still do quite a bit with them. In fact, all of the text in this article is in tables! All you have to do is know how they work (what the rules are), and a bit about how to use FrontPage's table-making utilities.
FrontPage Editor has some nice utilites creating HTML tables. If your toolbar is set to display the table icon, you can click and drag from it to set up a table with as many rows and columns as you want. Or, you can select Table|Insert Table from the menu, and define your basic table layout in that way.

Tables, and the cells in them, have specific "properties," which you can set as well. For example, you will notice that while there are 3 columns in the center of this table, there seems to be only one column above and below the three. This is done by merging cells. To merge cells, just click in one cell, and drag into the other(s). Then select Table|Merge Cells from the menu.

You might also notice that the text in the left-hand cell of the 3 above is left-justified, while the text in the right-hand cell is righ-justified (unfortunately, you can't justify both sides of any HTML text - maybe someday). This can be done quite easily as well. Just right-click the cell you want to set properties for, and select "Cell Properties" from the menu. Use the "horizontal alighnment" property to align your text left, center, or right. Use the "verticle alignment" property to align text or images top, center, or bottom, as I've done with the 3 cells above (all are top-aligned).

There are a number of other cell properties which you can set. For example, you can set the relative width of the cell in relation to the table. I set all 3 cells to 33% (actually, the one in the middle is 34% - had to make 100, eh?). In most cases, when setting the cell width, you'll want to set the width for an entire column. You can do this by placing your cursor in any cell in the column and selecting Table|Select Column from the menu. Then right-click in any selected cell and select "Cell properties" from the popup menu. You can also work with rows in the same fashion.

To work with the entire table, there are several techniques you can use. You can right-click anywhere in the table and select "Table Properties" from the menu. For example, I set the background color of this table to Black. In addition, you can set the width of a table from this dialog box. I recommend using percentages in all width properties, as the table will resize itself to fit whatever browser, window size, and/or resolution the client has.

You can also set up borders for your table with this dialog box. In this case, I omitted borders. This creates the illusion that you're not using a table at all, but are simply formatting your text and images. Play with the borders controls.

You can use background images as well, but one word of caution: Most versions of Netscape don't support background images for tables, so be prepared for them not to show in Netscape. Be careful to set your table background color and font color to account for the possible absense of a background image.

The other way of setting properties for the entire table is to place your cursor anywhere in the table ans select Table|Select Table from the menu. This can be useful for non-table-specific properties which you want to set for the entire table. For example, I used this to set the font styles for the table.

Here is an example of a table with borders. I used the borders properties of the table to select the width, color, and spacing of the borders in this table. Note that the table borders are set up so that you can use color to simulate a 3-dimensional look for your table borders. Isn't that exciting?

So, I hope you can see that, with a little imagination, there are a myriad of uses for tables in your web pages. Remember that all of the utilities and functions of FrontPage are mere tools. You'll find that it takes imagination and ingenuity to combine them to create solutions for your web design problems.

Remember also, that it isn't necessary to dazzle anyone with your "prowess." If you keep your design goals in mind, and don't overrate your tools and utilities, you will dazzle people with your superb design work. the tools shouldn't stand out; the design should.

Author: Kevin Spencer
Date: 10/31/97

More articles about Microsoft FrontPage
More articles by Kevin Spencer
Author Biography

write for us about us advertise

Copyright 1997, 1998 A Big Lime. All rights reserved.

ttom2.htm" -->