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

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.

BORDER:
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:
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:
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 tables.

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:

<TABLE> <TR> <TD ALIGN=LEFT>data cell information</TD> <TD ALIGN=RIGHT>data cell information</TD> </TR> </TABLE>

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:

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

Frames

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.

Terminology

Layout Documents

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

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.

Targets

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.

EXAMPLE

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:

upper frame
lower left frame	lower right frame

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:

<html> <head> <title>A</title> </head> <frameset rows=*,*> <frame src=x.htm> <frame src=yz.htm name=bottom> </frameset> </html>

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 `<Frameset>` Tag

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 "rows=row_list" or "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> tag.

Frame Definition: The `<Frame>` Tag

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 <frameset> tags and define the contents of each frame declared in the row or column list of the preceding frameset tag.

In our example, because the row list ("rows=*,*") specifies 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.

Naming Frames

You can assign names to frames by including the tag attribute "name=frame_name" in the <frame> 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.

Targeting Frames

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

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.

Linking Targets

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:

<a href=document.htmltarget="frame name">Link</a>

The targeting frame name may be either an explicit name assigned to frames in layout documents, such as the frame name "bottom" appearing 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:

_self
Directs the browser to update the frame containing the selected hyperlink. This is the default target if no target is specified at all.
_parent
Directs the browser to update the parent frame if the frame containing the hyperlink is a child frame, otherwise has the same effect as _self.
_top
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.

EXAMPLE

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

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:


`yz.html`	`zy.html`

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 updating their own parent frame. This is a good opportunity to demonstrate the use of an implicit frame name, "_parent," which refers to the parent frame (or window) of the frame containing the hyperlink.


`y.html`	`z.html`

Notice the use of the implicit frame name "_parent". 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