FrontPage has a pretty darn good set of tools for building tables visually in the FP Normal mode. One word of caution, FP lets you drag table cell walls around on the screen, but the code FP writes when you do this is not compatible with all browser and is far from precise. It's much better to construct your table using the table and cell properties dialogs. These dialogs are very effective when you understand the code they write. You don't necessarily have to be fluent, but you should understand it.

In this article, I'm going to explain the very simple concepts of html tables - what a tag is, what an attribute it, etc. It's going to be easy. Don't worry. Be happy. Future articles will build upon this one, explaining in greater detain how to construct precise tables that produce the same layout in all browsers. But first, the code.

Tags

What I'm about to say isn't always true in html, but it's always true in html tables, and it's usually true in all of html. Anything you do to something on your Web page starts with an opening tag and ends with a closing tag. Putting 4 words into individual cells of a table with 2 columns and 2 rows requires you to start with a table opening tag <table> and end with a table closing tag </table>. Creating the first row in the table requires you to start with a table row opening tag <tr> and end with a table row closing tag </tr>. Creating the first cell in the first row of the table requires you to start with a table data opening tag and end with a table data closing tag </td>. Here's what I'm talking about.

<table> (this opens the table)

<tr> (this opens the first row)

<td> (this opens the first cell) THIS </td> (this closes the first
cell)

<td> (this opens the second cell) THAT </td> (this closes the
second cell)

</tr> (this closes the first row)

<tr>

<td>OTHER</td>

<td>THING</td>

</tr>

</table>

You have to close the first cell <td> before you can start the next one. You have to close the first row <tr> before you can start the next one, and you have to close the table </table>, or Netscape will not be able to display it. That's all there is to it. At this point, my students usually look at me funny and say "that's it? You can make a living doing that? " Well, there's a little more to it than that, but you can easily understand everything else if you understand the code above. The next thing on the menu is Tag Attributes.

Attributes

You can customize html tags with attributes. Let's say you want the table in the above example to be exactly 400 pixels wide. You would need to use an attribute in the table tag to make that happen. Here's how that would look.

<table width="400">

Replace <table> in the first example with this tag, and your table will now be restricted to 400 pixels in width. There are attributes to control the padding between objects in a cell and the cell walls (cellpadding,) the space between cells cell spacing,) the alignment of the table, the background color of the table and more. When you right click in a table and select "Table Properties" in FrontPage, the dialog that you get is a menu system for writing attributes into the table tag. You can customize individual cells with attributes also. You can control the width, background color, vertical alignment, horizontal alignment, and more. When you right click inside a table cell and select "Cell Properties" in FrontPage, the dialog you get is a menu system for writing attributes into the table data (cell) tag.

This brief overview allows you to understand the broad concepts of html tables. The next installment in this series will cover merging cells, splitting cells, vertical alignment, and the pitfalls involved in getting your table layouts to behave the same way in IE and Netscape.