Virtual Mechanics
Click here for a free WYSIWYG pixel precision HTML editor.
For the best in D HTML editors
Archive by Date
Archive by Topic

Introduction to HTML. Tables and Frames

Some of the more advanced features of today's HTML pages include
Dynamic HTML and CSS capabilities that I have briefly discussed
in past issues. Other advanced capabilities include Frames, Tables,
Forms and Scripts. Each of these topics could have (and do have)
entire books devoted to them. This week I will briefly discuss
Frames and Tables so that you will at least be able to recognize the
code and refer to more extensive help if you wish.

Tables are used to collect images and text together into a series of
cells that can be organized horizontally and vertically. A typical use
for a table would be a monthly calendar. I posted a list of special
HTML characters in a table several issues ago at is3fig1. Take a look at
the source for an example of many of the options that can be used
when constructing a table.

Here is a simple Table example:

<CAPTION>A Simple Table</a>
<TD>Box 11</TD>
<TD>Box 12</TD>
<TD>Box 21</TD>
<TD>Box 22</TD>


This example adds text to each of four cells over two rows. The
TABLE tag is used to delimit the operation. You can also use this
tag to assign a border, border style and cell spacing to the table cells.
The <TR> tag is used to create a new row of table information while
the <TD> tag is used to enter data into a table cell. You can also
assign a background color with the TD tag.

Almost any valid HTML can be placed into a Table. Instead of text
you can use the image tag as discussed last week to add pictures to
the cells and the anchor tag to add links. If you wish, you can even
add other tables to a cell to create a table within a table. Table cells
do not need to be evenly divided between rows and columns. The
<ROWSPAN> and <COLSPAN> tags can be used to create more
complex table layout schemes.

Is10fig2 illustrates some of these more advanced table features.

Instead of HTML elements placed into cells, Frames are used to
display entire HTML pages within rectangular regions of a browser.
If you have ever looked at the source for a relatively complex web
page only to discover that there is hardly any code, chances are the
page was constructed using Frames.

Frames are actually quite easy to set up. Simply create the pages you
wish to display together the way you would normally create them.
You can then create a master page with the Frame tag to display
these pages together. An example for a frame page is:

<TITLE>A Simple Frame Page</TITLE>
<FRAMESET cols="20%,80%">
<FRAME src="is10left.htm">
<FRAME src="is10right.htm">


In this very simple example, a Frame page is constructed to display
two other pages. The page "left.htm" is displayed in a frame that
occupies the first 20% of the left side of the screen while the page
"right.htm" will be displayed in the remaining 80% of the screen to
the right. These frame pages can be as simple or as complex as you
wish and can be viewed independently. The two pages that make up
the frame page above can be viewed separately at
is10left and  is10right

A page can be composed of as many horizontal and vertical frames
as you wish. Take a look at is10fig4 for an
example of a far too complex use of frames. If you look at the source
you will see that there are many additional attributes you can add to
your frames including borders and scroll bars.

IMS Studio is scheduled to include a visual editor for Tables and
Frames later this autumn. In the mean time as I hope you have
discovered, adding tables through the IMS HTML editor and using
any text editor to create a Frame page is quite easy with a bit of


Next week I shall conclude this series on basic HTML with a brief
discussion on Scripts and Forms.

"IMS Web Tips" ISSN 1488-7088
© Copyright 1999 Virtual Mechanics

"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on
creating, maintaining and promoting their web sites.

To subscribe send an email to tips@imswebtips.com with SUBSCRIBE
as your subject or visit the IMS Web Tips home page for subscription information and a list of past articles.
IMS WebTips