The Frameset Tag

These tutorials are about XHTML, the Extensible Hypertext Markup Language.

The <frameset> tag

The <frameset> is the container of the contents of a frame document. The content is information as to what goes in each frame.

The <frameset> tag is used to specify how many frames there are and how they are arranged.

This is done through the use of the cols and rows attributes. The cols attribute is used to specify the number of columns to break the browser window into, or how many frames across. The rows atribute is used to specify the number of rows, or how many frames top to bottom.

You then use the <frame /> within the frameset to specify information for each frame. The <frame /> tag is the content of the <frameset> tag.

Each frame has a src attribute specifying a document to be placed in that frame. Each frame defined for the frame set has to have a document defined for it. Alternately, instead of a frame, you can substitute another <frameset> tag in its place. This nests another set of frames where that single frame would otherwise have occurred.

The frames are defined across and then down. For instance, in the following frameset, you would have four frames to define as noted. (Note: I will be using tables to mimick the frame examples shown below for reasons that will become clear as you play with frames.)

<frameset cols="*,*" rows="*,*">

would require the frames be defined in the following order:

Frame 1	Frame 2
Frame 3	Frame 4

When specifying the number of rows or columns, you do not give a single number, instead you provide a comma separated list of how large you want each row or column to be. This value can be an absolute pixel value, a percentage, or a ratio value. Percentages end in percent signs, such as 50%. Ratio values end in asterisks, such as 2*. Above there are just asterisks in the example. Although you could write 1*, it is not necessary and usually just the asterisk is placed there.

Absolute values define how many pixels a row or column spans. You should never use absolute values for all the frames in a frame set because you have no way of knowing the screen resolution the user is using. They may also have resized their browser window to something other than the full screen.

The total size of frames cannot exceed the size of the browser window. The contents inside the frame can be larger, since frames can be scrolled, but the frame itself is just a window, and pretty much by definition, a set of windows cannot be larger than the window containing it.

If the frame sizes are specified with absolute values and and the total is less than the size of the window, the values will be treated as ratio values, discussed below. If the total of absolute frame sizes is larger than the size of the window, then some browsers will treat them as ratio values while other will allocate the space as listed, meaning anything that is entirely off the edge of the screen will not be accessible.

Percentages specify what percentage of the window height the row uses or what percentage of the screen width the column uses. For instance, rows="25%, 75%" would split the screen into two frames, one taking up the top 25% of the screen. The other taking the bottom 75%.

Another example, cols="50%, 75%, 75%" is a little trickier. The total between the three columns is 200%. Since you cannot take up more than 100% of the browser window, the numbers are proportionally reduced to fit the window. In this case, they are all cut in half. The command would then be equivalent of cols="25%, 37.5%, 37.5%".

Ratio values are based on whatever space is left over on the screen. For instance, cols="100, *" will create two frames side-by side, set the first frame to 100 pixels wide and set the second frame to whatever is left over. Absolute values take precedence over percentages and ratio values. This example is a common way of setting up frames, having one fixed and another variable size to allow the page to adapt to different browsers.

Another example: cols="*, 2*" will also split the screen into two columns, the first being one-third of the screen and the second being two-thirds of the screen. If it helps you can think of it this way: There are three asterisks, so the screen is treated as if it were split into three equal parts. The first column gets assigned one part since it has one asterisk and the second column gets assigned two parts since it has two asterisks.

Now here is a trick question. How do you intentionally hide a frame?

The way you hide a frame is to make sure all the screen real estate is spoken for before you specify the hidden frame. For instance, rows="50%, 50%, *". In this case, the last row is designated to take up whatever is left over after 100% has been specified in the previous two. Hidden frames are of no use to us here, but can be useful in online applications as a handy place to store data.

These pages can be found at: [http://academ.hvcc.edu/~kantopet/]
Copyright 2003 -- Peter L. Kantor[kantopet@hvcc.edu]
Last Updated August 2003