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