Using FrontPage to insert
and design a table is pretty straight
forward. But, to understand what is
going on, you need a little more understanding
of the table structure that is made
up of some HTML Tags.
Table Basics
<TABLE> Opens the
table.
<CAPTION> and </CAPTION>
places a caption over your table. The
caption will be centered. This tag isn't
used much.
<TR> Table row begins
</TR> Table row
ends
<TD> Table cell
(containing "data", thus the
D in TD, also referred to as Table Definition)
</TD> Table cell
ends
</TABLE> Closes
the table
Note: <td> is always enclosed
in a <tr>, which is always enclosed
in a <table>.
Here is an example of
a basic table. Paste the following between
the <body> </body> tags
in your web page and view the results.
They should look like this.
<TABLE>
<CAPTION>The Table</CAPTION>
<TR><TD>one</TD>
<TD>two</TD>
<TD>three</TD>
</TR>
<TR>
<TD>four</TD>
<TD>five</TD>
<TD>six</TD>
</TR>
<TR>
<TD>seven</TD>
<TD>eight</TD>
<TD>nine</TD>
</TR>
</TABLE>
Yep, pretty basic, but
that's where we were...now to where
we are going...
Dressing Up Our Tables
Using the table example
above, let's suppose we want to actually
show the table borders, enlarge the
table cells, center the text (data)
and, what the heck, throw in some color.
Try this: (You can copy this into Notepad,
and then paste it into your page between
the <body></body> tags)
<TABLE cellspacing="10"
cellpadding="20" border="7"
bordercolor="#808080">
<CAPTION>The Table</CAPTION>
<TR>
<TD align="center" bgcolor="#008000">one</TD>
<TD align="center" bgcolor="#00CC66">two</TD>
<TD align="center" bgcolor="#66FF66">three</TD>
</TR>
<TR>
<TD align="center" bgcolor="#FF9900">four</TD>
<TD align="center" bgcolor="#FF9966">five</TD>
<TD align="center" bgcolor="#FF9999">six</TD>
</TR>
<TR>
<TD align="center" bgcolor="#CC0099"><span
lang="en-us">seventh</span></TD>
<TD align="center" bgcolor="#FF33CC">eight</TD>
<TD align="center" bgcolor="#FF99FF">nine</TD>
</TR>
</TABLE>
Tip: Staggering the tags
helps keep track of where each of your
elements or tags begins and ends. The
table will display the same with or
without staggering your tags. The table
above should look like this.
Experiment with the cellspacing,
cellpadding and border #'s to see how
they are displayed.
Centering and Text Wrap
Now we are going to center
the whole table and play with the way
the text "wraps" when the
browser is made smaller. Place the following
between the <body></body>
tags:
<div align="center">
<center>
<TABLE cellspacing="10"
cellpadding="20" border="7"
bordercolor="#808080">
<CAPTION>The Table</CAPTION>
<TR>
<TD align="center" bgcolor="#008000">one
of these days</TD>
<TD align="center" bgcolor="#00CC66">two
of a kind</TD>
<TD align="center" bgcolor="#66FF66">three's
a crowd</TD>
</TR>
<TR>
<TD align="center" bgcolor="#FF9900">foursome</TD>
<TD align="center" bgcolor="#FF9966">five
fingers and five toes</TD>
<TD align="center" bgcolor="#FF9999">six
pence</TD>
</TR>
<TR>
<TD align="center" bgcolor="#CC0099">seventh
heaven</TD>
<TD align="center" bgcolor="#FF33CC">eight
is enough</TD>
<TD align="center" bgcolor="#FF99FF">nine
lives</TD>
</TR>
</TABLE>
</center>
</div>
The finished table should
look like this. Now, grabbing the lower
right corner of the browser, resize
the browser smaller until you see the
text wrap around in it's cell. To make
it so the text doesn't wrap when the
browser is resized, you need to add
<td nowrap>, or rather nowrap,
to each of your table cells, as in the
following example:
<div align="center">
<center>
<TABLE cellspacing="10"
cellpadding="20" border="7"
bordercolor="#808080">
<CAPTION>The Table</CAPTION>
<TR>
<TD align="center" bgcolor="#008000"
nowrap>one of these days</TD>
<TD align="center" bgcolor="#00CC66"
nowrap>two of a kind</TD>
<TD align="center" bgcolor="#66FF66"
nowrap>three's a crowd</TD>
</TR>
<TR>
<TD align="center" bgcolor="#FF9900"
nowrap>foursome</TD>
<TD align="center" bgcolor="#FF9966"
nowrap>five fingers and five toes</TD>
<TD align="center" bgcolor="#FF9999"
nowrap>six pence</TD>
</TR>
<TR>
<TD align="center" bgcolor="#CC0099"
nowrap>seventh heaven</TD>
<TD align="center" bgcolor="#FF33CC"
nowrap>eight is enough</TD>
<TD align="center" bgcolor="#FF99FF"
nowrap>nine lives</TD>
</TR>
</TABLE>
</center>
</div>
This table should look
like this. Again, resize the browser
to make it smaller and you can see that
now the text in each cell will not 'wrap'.
Using FrontPage
Okay, let's take a break
from "hard coding" in HTML
and get back to the FrontPage editor.
Select the last table we designed above
and use FrontPage to change some of
the attributes. In Normal view in FP,
right click in your table and select
Table Properties. Click the box for
"Specify width:" and assign
100 "In Percent" and do the
same with "Specify Height:".
Wow, pretty cool, eh? The table takes
up the entire page, no matter what size
the browser is. It should look like
this. Go ahead a play with "resizing"
your browser. This is what the table
HTML code should look like:
<div align="center">
<center>
<TABLE cellspacing="10"
cellpadding="20" border="7"
bordercolor="#808080" width="100%"
height="100%" style="border-collapse:
collapse">
<CAPTION>The Table</CAPTION>
<TR>
<TD align="center" bgcolor="#008000"
nowrap>one of these days</TD>
<TD align="center" bgcolor="#00CC66"
nowrap>two of a kind</TD>
<TD align="center" bgcolor="#66FF66"
nowrap>three's a crowd</TD>
</TR>
<TR>
<TD align="center" bgcolor="#FF9900"
nowrap>foursome</TD>
<TD align="center" bgcolor="#FF9966"
nowrap>five fingers and five toes</TD>
<TD align="center" bgcolor="#FF9999"
nowrap>six pence</TD>
</TR>
<TR>
<TD align="center" bgcolor="#CC0099"
nowrap>seventh heaven</TD>
<TD align="center" bgcolor="#FF33CC"
nowrap>eight is enough</TD>
<TD align="center" bgcolor="#FF99FF"
nowrap>nine lives</TD>
</TR>
</TABLE>
</center>
</div>
Notice the elements that
were added to the <TABLE> tag.
You should experiment with pixels and
percentages, merging cells, etc, and
see what the code looks like. You will
see that rowspan and/or colspan attributes
are added. The rowspan allows cells
to span more than one row (how ever
many cells that were merged), and the
colspan allows cells to span columns.
Here is an example of some merged cells
over rows and columns. Take a look at
the code:
<div align="center">
<center>
<TABLE cellspacing="10"
cellpadding="20" border="7"
bordercolor="#808080"
width="100%" height="100%"
style="border-collapse: collapse">
<CAPTION>The Table</CAPTION>
<TR>
<TD align="center" bgcolor="#008000"
nowrap colspan="2">one
of these days<p>two of a kind</TD>
<TD align="center" bgcolor="#66FF66"
nowrap>three's a crowd</TD>
</TR>
<TR>
<TD align="center" bgcolor="#FF9900"
nowrap>foursome</TD>
<TD align="center" bgcolor="#FF9966"
nowrap>five fingers and five toes</TD>
<TD align="center" bgcolor="#FF9999"
nowrap rowspan="2">six
pence<p>nine lives</TD>
</TR>
<TR>
<TD align="center" bgcolor="#CC0099"
nowrap>seventh heaven</TD>
<TD align="center" bgcolor="#FF33CC"
nowrap>eight is enough</TD>
</TR>
</TABLE>
</center>
</div>
No Margins
Want your page to completely
fill the browser view (no margins)?
Place this code in your body tag - and
that's it! <body bgcolor="#FFFFFF"
topmargin="0" bottommargin="0"
leftmargin="0" rightmargin="0">
(#FFFFFF is a white background) Take
a look, no margin!.
Tables are one of the hardest things
to do in HTML, however, once you get
used to what is going on, you can usually
tweak the code to get your desired results.
To learn more about tables, check out
some of the links below.
One last tip. Apparently Tables, if
used to extreme, will slow down web
loading speed. Check out the Webmonkey
article about making your tables "Lean
and Mean".
