Advanced HTML: Tables and Frames
Once you're comfortable with standard HTML tagging, you may decide that you need
more advanced techniques to convey your information more effectively and enhance the
look of your web site. Netscape offers two useful HTML extensions which can accomplish both of these
goals: tables and frames. Neither tables nor frames have become part of the "official" HTML
standard language, but their high utility value and extreme popularity among page designers
will likely earn them a standard specification in HTML 3.0 or later.
In the meantime, use discretion when choosing either extension for your page.
Netscape 1.1 or later will support tables, but frames are visible only on Netscape 2.0 or higher.
Both are excellent features for streamlining the organization of your sites, but as with
any other HTML enhancement, knowing when and how often to use them is the key to successful page design.
Tables are plentiful on the web, mostly because they are an excellent tool
for organizing and presenting information clearly and logically. Like their hard
copy counterparts, HTML tables provide an effective way to present charted data,
long lists of statistics, or even tables of contents. Not only will tables divide your data, links,
or lists into a clearly defined format, but they will also enhance your page visually by reducing
the "clutter" of lengthy or unwieldy lists of information.
The Table Tag
The foundational tag for table building is the <TABLE> tag, which
must first introduce the table into the document and announce the end of the table with the
</TABLE> tag. If you do not contain your table structure and formatting
tags within these tags, all of your programming will be ignored. Currently, tables
appear on the page like images, but you cannot align them like images. Your only option
for special alignment is to use the <center> tag before the <TABLE> tag, and your
table will be centered on the page. Netscape has plans to increase the alignment potential for
tables, but for now, the table tags have implied line breaks both before and after them, allowing little
flexibility over how the table appears on the page.
The TABLE tag has several attributes which will allow you more control over the
table's appearance on the page. You can customize the look of the table using the
BORDER, CELLPADDING, and CELLSPACING attributes.
This attribute is programmed within the TABLE tag. It instructs browser to
draw borders around all table cells. By default, the browser will leave space for
for the borders; therefore, border or no border, the table will be the same size.
Borders can have a particular value, which will allow you to emphasize the lines of a table
for effect. You can also set the value of the border to zero so that the browser will
not reserve space for the default borders, giving you the most compact table possible.
Cellspacing indicates the amount of space between the individual cells in a table. Netscape
uses a default of CELLSPACING=2, but you may change the value to allow more or less space in your table.
Cellpadding defines the amount of space between the border of the cell and the contents of the cell. In many
respects, it has the attributes of a margin for your table cells.
Netscape has set the default cellpadding value to one, and they do not recommend changing it to
zero because the information in each cell could appear crowded against the cell borders without
a cellpadding value.
The Caption Tag <CAPTION>...</CAPTION>
As an additional enhancement to your table, Netscape allows you to describe your table using captions. Caption tags must appear
after the <TABLE> tag, but not within the table row or table data tags.
Captions also allow for alignment attributes. The default is ALIGN=TOP, but you can
set it to ALIGN=BOTTOM. Any text or HTML can appear within the caption, but if the block
of text is longer than the width of the table when it appears on the screen, the browser will
break the lines to accomodate that width.
The introductory tagging for a table which will use a border of 4, cellspacing of 4, and
cellpadding of 2 would be programmed like this:
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=2>
This is not enough information to build a table of any significance. Before
viewing an example of a table, you'll need to understand the architecture of HTML
Structural Table Tags
After the introductory table tag, you need to tell the browser how to construct the table.
For this you will need to have a clear idea of how your table should be arranged. You need to consider
how many rows, columns, and headings are required for the layout you have in mind. Once you have determined this, you can
design your table using the Table Row <TR>, Table Data <TD>, and Table Header <TH> tags. These
three tags will dictate the structure of your table.
TABLE ROW <TR>...</TR>
Each <TR> tag indicates a separate row in your table, where a row defines
the horizontal divisions of the table structure.
TABLE DATA <TD>...</TR>
The <TD> tag defines what is known as a "data cell," which is simply
a single block of your table structure which contains a piece of the information you're presenting. Any text or HTML
document can be used as table data, but the browser will break large amounts of data so that
it fits the cell size. Each bit of data you convey must be
contained within the Table Data tags, which in turn must be contained within Table Row tags. You can have as many
rows of data as you wish, as long as you distinguish each separate row with the <TR>...</TR> tags.
You can also manipulate the table row and table data tags to create columns by using the ALIGN and VALIGN
attributes of the table data tag. The table data cells will fill in the table rows horizontally by default, but by using
the ALIGN attribute, you can specify "right" or "left" alignment like this:
This would build a very simple table with one row, divided into two columns, each containing
one data cell of information. You could repeat this process on subsequent rows and even add more table data tags to make a more complex table.
If you have more than two table data tags in a row, you would not need the ALIGN attribute, because the data cells fill in the table
rows by default.
TABLE HEADER <TH> and the COLSPAN Attribute.
The table header describes a single block of the table which will appear in bold text as a heading for
a row or column. You can include as many table header tags as you need, as long
as each block is contained within the <TH> and </TH> tags.
If you have more than one vertical column in your table, you can use the COLSPAN
attribute to tell the Headers how many columns of the table
you want them to span, creating headings for multiple-column tables. This attribute should be written into the
table header tag like this:
<TD ALIGN=LEFT>data cell information</TD>
<TD ALIGN=RIGHT>data cell information</TD>
<TH COLSPAN=2>Header Information</TH>
You can also use the ALIGN attribute within a table header, although in
this instance, it will apply to the data you put in the heading, and not the actual
placement of the header. After all, the header is going to span the number of columns you indicate, therefore
any alignment of the header itself would be irrelevant. You can, however, center the text or align it to the right:
<TH COLSPAN=2 ALIGN=CENTER>Header Information</TH>
Note:COLSPAN and ALIGN function identically within the TD and TRtags.
Portions of this section have been reproduced as they appear in Charlton
Rose's excellent Frames Tutorial at http://sharky.nomius.com/frames/menu.htm
The Frame extension for Netscape 2.0 is a very useful but somewhat difficult
tool. Frames divide the browser screen into independent regions delineated by
"frames" that are drawn on the screen according to the sizes indicated by the
HTML coding you provide. Each frame acts as a vessel for separate HTML documents of your
choice and can act as an independent browser screen with links, images, and text.
If you have ever seen a television with the "picture-in-picture" capability to display
two or three different channels of programming on the same screen, then you
will be able to understand the function of frames.
Frames have many valuable uses, but as with anything else in the HTML repertoire,
it is possible to have too much of a good thing. First of all, only Netscape--Netscape
2.0 and higher, actually--will support frames. Therefore, in order to accomodate
other users, a thorough programmer will also program a "no frames" page into the frame layout. If someone accesses the
framed site from a browser which does not read frames, the programming automatically
routes them to the frameless page. In addition to browser incompatibility, frames writers have to
contend with differing browser screen sizes which can affect the appearance of a framed
page. Small browser screens can crop images and oversized screens leave a lot
of empty space. Sometimes, the frames themselves can interfere with the visual effect
of your site by crowding the screen and making it too busy to convey information effectively.
Consider these problems when designing your site and adjust your layout accordingly.
Layout documents contain the information that describes the frame structure
of a document. A layout document contains the overall architecture of the framed
site and is the page that will divide itself into the separate frames when it is
viewed on the screen. Each frame specified in a layout document contains a reference to an HTML
document which will be displayed in the frame when the page appears on the browser.
This so-called "child document" will be displayed independently of neighboring frames in
the browser window and may be either a contents document or even another layout
document that will further subdivide the screeen into frames drawn within its own portion of the browser screen.
Contents documents are normal HTML documents that contain actual text, graphics, and
links, just like any other document you write in HTML. Each frame on a framed site will display
a contents document known as the "frame source," meaning that when the frame is drawn by the browser according
to the specifications programmed by you, it will then look for the source document to display in the frame. You will
indicate this document in the HTML programming of your layout document.
Targeting is the magic behind Netscape frames. Once you grasp the concept of targets, you will be
well on your way to understanding the frame programming. Targeting
allows links in one frame to target other frames for display
when the links are selected. In other words, if you are have a page divided into three frames, X,Y, and Z, you can
program a link in frame X which will call on a document called B.html, and then display the
document B.html in frame Y. This is accomplished by assigning
names to frames and adding a target attribute to standard link anchor tags.
Targeting allows you to design the flow and appearance of information by utilizing the
different frames so that they work simultaneously to display two different documents. For instance, if you have a table of contents
in one frame, you can target the adjoining frame so that it displays the selected item when clicked, allowing people to
move back and forth between the two frames without having to use the "back' button on the browser or navigating between
two separate documents displayed on separate pages.
from Charlton Rose's tutorial
Frames are probably best understood visually. To use them in an example,
let's start by viewing the basic frames layout:
This table shows an example of a desired layout for the framed page.
To accomplish this we will first divide the browser window into upper and
lower frames, and then further divide the lower frame into
lower-left and lower-right frames. The first of these two divisions is
specified in layout document which we'll call a.html, as follows:
As you can see, this is a new kind of HTML. Several things are worth
observing in this code:
- Opening and closing
<body> tags that usually
appear in HTML documents have been replaced by
<frameset> tags. This is the distinguishing feature
of layout documents.
- Unlike most tags, the tag
<frame> is a
single entity and does not occur with a closing </frame> counterpart.
- a.html contains absolutely no browsing content! If a
user were to view this file with a frames-incapable browser, he would see
only a blank screen. However, hidden in the code are URLs to two other
documents. (Information on how layout d ocuments can be configured to to
accommodate frame-incapable browsers is given in another discussion.)
Frame Declaration: The
As we have noted already,
<frameset> tags replace
<body> tags in layout documents. The opening
<frameset> tag must include either a row list or a
column list, taking the form
cols=column_list" immediately after the keyword
frameset, as seen in a.html. Row or column lists
are comma separated lists of frame size specifications. In
a.html, we have chosen to allow browser software to determine row
frame heights by using the value
* for each row. (The width
of the row frames will, in this case, be determined by the width of the
browser window.) Each member in a row or column list represents only a
declaration of a frame's existence. Frame definitions,
which specify the actual contents of previous declared frames, are
indicated within the
Frame Definition: The
Now that we have used
<frameset> tags to divide the
browser window into two row frames, we must now instruct the browser what
to put in these frames. We accomplish this through the
<frame> tags, which occur between
tags and define the contents of each frame declared in
the row or column list of the preceding
In our example, because the row list ("
the existence of two row frames, the code in a.html contains two
frame specifications. Before continuing, please take a
moment and look at them again.
Specifying Frame URL's
Unless you find an empty frame extremely interesting, at the very least,
each frame specification should contain a URL to another document. Frame
URLs are specified within the
<frame> tag by adding the
tag attribute "
src=URL", as seen in
a.html. At view time, after the browser has laid out the
document's frames, it will then use these URLs to load documents for
display within the frames.
You can assign names to frames by including the tag attribute
name=frame_name" in the
tag, as shown in the second frame definition in a.html. In this
example, the upper row has no name, while the lower row has the name
"bottom". Assigning names to frames makes it possible to
later target them for update when hyperlinks are selected.
Certainly by now we all understand how a link works in a regular
HTML document. Point, click, and presto, a new document appears in the
browser window. Frames, however, operate under a different set of protocols.
When hyperlinks in framed
documents are selected, the browser may update just the frame containing
the hyperlink, a different frame, a set of frames, or even the entire
window. Thus, when a hyperlink is selected, some or all parts of the
browser window may change, depending on parameters specified in the
As I metioned earlier, linking between frames is the result of the ability
to target certain frames through your HTML coding. Compared to the
details of creating a layout document for your frames, targeting is a snap.
The most difficult part of designating targets is deciding how you want the information
to flow and how the architecture of the site should be designed.
Frames are targeting with regular A HREF commands as an attribute specified within
the anchor tag command. As long as you have indicated frame names in your layout document, you can easily
program these target links. If you have not assigned names to your frames, return
to your main frame layout document and name each frame so that you can specify them
in your programming. The target attribute functions like this:
The targeting frame name may be either an explicit name assigned to frames in
layout documents, such as the frame name "
in layout document a.html above, or what is called an implicit name, which is
determined by the frame's relationship to other frames. Implicit names
are reserved words beginning with an underscore (_) and contained within quotation marks.
Some of these are listed below:
- Directs the browser to update the frame containing the selected
hyperlink. This is the default target if no target is specified at all.
- Directs the browser to update the parent frame if the frame
containing the hyperlink is a child frame, otherwise has the same effect
- Directs the browser to update the entire window, regardless of the
current frame layout. If you are providing a link to another framed document or a web site
outside of your own, this specification is desired. This way, the user can leave
the confines of your frames to view the other page on the full screen without the
distortion of resizing it will undergo to fit inside your frames.
An example of targeting in HTML programming:
Take a close look at the hyperlinks in this code. The hyperlink attribute
target=bottom" means that the frame named "bottom"
will be the target for the new document when the user selects the
Let's take this lesson a step further and assume that the frame named "bottom" targeted above
contains another layout document that divided its area into two "child frames" which will
in turn divide the bottom frame into another framed document. Follow the proceeding examples as
they synthesize both frame layout and targeting to put the frame syntax to use
in one comprehensive example.
First, you would need to have a layout document
indicating that frame "bottom" is another framed set of documents that appears when
that frame is targeted from a link on the original framed page. The source code for the layout document
dividing the bottom frame into two further frames would look like this:
We now move on to add the same functionality to the hyperlinks in frames
Y and Z.
Although much of the procedure is the same,
the context for hyperlinks in frames Y and Z is different because
the hyperlinks in these frames will update their own frames.
In other words, the hyperlinks in frames Y and Z will update themselves by
their own parent frame.
This is a good opportunity
to demonstrate the use of an implicit frame name, "
which refers to the parent frame (or window) of the frame containing the hyperlink.
Notice the use of the implicit frame name "
We could just as well have used "
bottom" as the target,
and the result would have been the same.
And now we're done! We've just created a multi-frame document that updates selected
frames on demand without updating the entire window. If you already have
a frames-compatible browser, give this example
a try and watch how it works. If you've been engaged with all the x's, y's, and z's
of Charlton Rose's examples, you'll be able to follow what he's done. If you're still confused (or become confused),
come back for an explanation. To go back in frames, use the back button on your browser to return
to the last page you were on before entering a framed site. If you are in a particular frame and wish
to go back to the last document in the frame, hold down the right mouse button until a menu with
"Back in Frame' or "Forward in Frame" options appear.
Rose's example specifies an initial frame layout page called a.html which divides the screen into three windows,
X, Y, and Z, each with "frame source" contents documents named respectively, x.html, y.html, and z.html.
In this case, x.html is a stand-alone document in the top portion of the screen, but
the bottom part of the screen is a document called yz.html, which divides the bottom into
the two documents you see, Y and Z. This is an example of the nested frame, which is a frame layout document that acts
as the frame source contents document in the very first opening frame page. When the browser follows the instructions to
find the document yz.html to display it in the lower window, it discovers that yz.html contains further instructions
to divide the screen into Y and Z. In other words, the only information on document yz.html is a frameset command
which goes out to find the documents Y and Z to display them in the two subdivided frames
you see on the page.
The links YZ and ZY are examples of targeting the nested frames Rose has incorporated
into his layout documents. Note that when you click on YZ, Y appears in the lower left and Z appears in the lower right. When
you click on ZY, the inverse is true. Don't be confused by the constant swapping of the screens. All that happens is that one nested frame--the
initially targeting yz.html discussed above--contains the two documents Y and Z, which in turn contain
targeted links to yet another nested frame document, zy.html, a document which merely reverses
the frame positions of documents Y and Z. Rose's use of the implicit name _parent in his targeting
commands is, in this case, merely another way of instructing the browser to display the contents of zy.html
in the frame that contained the link to that document. When Rose says that he could have
also used the frame name "bottom" instead of _parent, he means only that the new frame that will appear from the clicking the link
to zy.html is laid out exactly the same way as yz.html and will also appear within the
bottom frame on the page. It may have been more useful and more clear if he had changed
the frame structure of zy.html so that you could see the difference, but hopefully my summary can
clarify his programming a bit for you.
Now, go back to the example and look again. This time, use the View Source feature
to see if you can figure out all the steps he took in his example. After that, you may
want to find some other frame examples and see how they function. Try these for example:
Dan Backer, Portraiture in the U.S. Capitol
Eric Gislason, Erastus Salisbury Field: Yankee Seer
Josh Johns,Western American Literature
Julie Rose,English Department Desktop
Don't be afraid to experiment with tables and frames. You may have to design a few practice pages
before you will find success with the programming. They're not difficult to understand
once you tap into the logic of the programming and begin to comprehend the architecture of this features. As HTML advances and the
look of the Web changes, these extensions may become standards or they may fall by the wayside as newer and
more powerful tools become available. In the meantime, enjoy the enhancements these advanced techniques can offer and good luck
with continued advancements in the content of your web site.
Sponsored by the American Studies Group at UVA ©1996
Maintained by Joshua Johns