How to talk "frames"

Take note One should include a DTD declaration at the very top of a frameset document [before the opening HTML tag]:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Click on a frame or frameset attribute below to find out about the proper syntax.

frameset attributes:

frame attributes:

<noframes></noframes>

Take note <frame ...> must be placed between frameset tags.

To better understand how things work, try the Layout Editor [requires a large screen resolution]. It has the same content as this page but allows you to interact with a dynamic frameset for instant feedback!

Give it a try!

COLS | Defines the Columns

The possible values are: integer,%,* and a numeral followed by an asterisk [read this].
There is no default value.
The comma-separated list and the number of comma-separated items represent the number of frames while the value of each item determines the frame size.
You may mix the value types but keep in mind that the total of the values in cols should always be equal to 100% of the available window's width.
To make sure to achieve this, one should always use an asterisk as one of these values.
Consider the asterisk [*] as the "left over" value. It represents the remaining value after computing pixels and/or % together.
If you don't use an asterisk to accommodate that remaining value, be aware that a "Pixel" value will take over a "%" value and that the % value will play the role of an asterisk [*].
To demonstrate this, try our Layout Editor with the following values for the cols attributes:
cols="12%, 200" and then cols="12%,*". You'll notice that the 12% in the first example is simply ignored.

If you want to divide the available or remaining space evenly, simply use more than one asterisk. The following code will create a frameset with 4 frames of equal sizes.
See that code in action.

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

	<frame src="blue.asp">

	<frame src="yellow.asp">

	<frame src="red.asp">

	<frame src="green.asp">

</frameset>

To better understand the use of combined asterisks look at the code below.
See that code in action.

<frameset cols="*,60%,*">

	<frame src="blue.asp">

	<frame src="yellow.asp">

	<frame src="red.asp">

</frameset>

The comma separated list says that the middle frame needs to be 60% high and that the remaining frames should split what's left.
It is the same as <frameset cols="20%,60%,20%">

Take note asterisks are one of the keys to good frameset design; don't leave them out!

ROWS | Creates the Rows

The possible values are: integer,%,* and a numeral followed by an asterisk [read this].
There is no default value.
The comma-separated list and the number of comma-separated items represent the number of frames while the value of each item determines the frame size.
You may mix the value types but keep in mind that the total of the values in rows should always be equal to 100% of the available window's height.
To make sure to achieve this, one should always use an asterisk as one of these values.
Consider the asterisk [*] as the "left over" value. It represents the remaining value after computing pixels and/or % together.
If you don't use an asterisk to accommodate that remaining value, be aware that a "Pixel" value will take over a "%" value and that the % value will play the role of an asterisk [*].
To demonstrate this, try the Layout Editor with the following values for the rows attributes:
rows="12%, 200" and then rows="12%,*". You'll notice that the 12% in the first example is simply ignored.

If you want to divide the available or remaining space evenly, simply use more than one asterisk. The following code will create a frameset with 4 frames of equal sizes.
See that code in action.

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

	<frame src="blue.asp">

	<frame src="yellow.asp">

	<frame src="red.asp">

	<frame src="green.asp">

</frameset>

To better understand the use of combined asterisks look at the code below.
See that code in action.

<frameset rows="*,60%,*">

	<frame src="blue.asp">

	<frame src="yellow.asp">

	<frame src="red.asp">

</frameset>

The comma separated list says that the middle frame needs to be 60% high and that the remaining frames should split what's left. It is the same as <frameset rows="20%,60%,20%">

Take note asterisks are one of the keys to good frameset design; don't leave them out!

Take note If you're thinking of creating an "invisible" frame, read this first.

FRAMEBORDER | This is about 3-D borders only

The possible values are: yes, 1, no, 0.
The default value is 1.
Invalid values default to displaying 3-D borders.
This is not what you think; if you set the value to "no", it does not remove the "border", it just does not draw an inset border [3-D].

Take note To remove borders, one needs to set 3 attributes to 0 [frameborder="0" framespacing="0" and border="0"].

FRAMESPACING | Pixels to reserve as space between frames

The possible value is: integer.
The default spacing is 2 pixels.

Take note Always use both attributes [framespacing, border] and give them the same value when setting space between frames... and do not ask why!

BORDER | Same as above [confusing isn't it?]

The possible value is: integer.
There is no default value.

Take note Always use both attributes [framespacing, border] and give them the same value when setting space between frames... and do not ask why!

BORDERCOLOR | Do you want color with that?

The possible values are: color name or RGB value.
There is no default value.
Because of old browsers it is preferable to use RGB color values than color names.

Take note The color will not render if there is no space specified between the frames [see framespacing, border ].

SRC | What document to load in the frame

The possible value is: a string that specifies the URL.
There is no default value.

NAME | The name of the frame

The possible value is: an arbitrary string to identify the frame.
There is no default value.
Naming a frame is not an obligation - because a frameset creates an array of elements [frames], it is always possible to reference an individual frame within the array [the collection of all items].
Keep in mind though that "top.mainframe" is easier to remember than "top.frames[1]".

Take note Even if it is possible to use scripting to name a frame [parent.frames[0].name="Banner"], keep in mind that in HTML the name persists only if it is defined in a frame within a frameset [<frame name="Banner" src="banner.html">].

TARGET | To set the frame at which to target content

The possible values are:
name of the target window or frame, "_blank", "_media", "_parent", "_search", "_self".
The default value is: _self.

Use _blank to load the document into a new blank window [this window is not named].
Use _media to load the document into the HTML content area of the Media Bar.
Use _parent to load the document into the immediate parent of the document the link is in.
Use _search to load the document into the browser search pane.
Use _self to load the document into the window in which the link was clicked [the active window].
Use _top to load the document into the topmost window.

Take note 2 of these values are MSIE only, _media is for MSIE 6 or later and _search is for MSIE 5 or later.

Take note If there is no existing window or frame with the same name as specified in the target, a new window is opened with a name equal to the value specified for the target. You should favor this technique over using _blank, because _blank opens an unnamed window and therefore will open a new window for every single linked document.

Take note Some browsers are confused by target names starting with an underscore; do not use name such as "_main", "_content", etc.

SCROLLING | What to do with the scrollbar

The possible values are: auto, no, yes.
The default value is: auto.

If auto is used [or if nothing is specified about the property], the browser determines whether scroll bars are necessary.

If no is used, the frame cannot be scrolled [regardless of content].
If yes is used, the frame shows the scroll bar [regardless of content].

NORESIZE | Whether the user can resize the frame

This attribute doesn't receive any value.
If it is not present within the tag, the user can resize the frame.
If it is present within the tag, the user cannot resize the frame.

Take note Try the Layout Editor to find out that setting one frame to noresize is often enough to lock all of the frames.

Take note When scripting, use "noResize" [notice the capital 'R'].

FRAMEBORDER | This is about 3-D borders

Take note To remove all the borders, one needs to set more than 1 attribute to "0":

<frameset... frameborder="0" framespacing="0" border="0"...>

<frame... frameborder="0" ...>

BORDERCOLOR | Color of the surrounding border

The possible values are: color name or RGB value.
There is no default value.
Because of old browsers it is preferable to use RGB color values rather than color names.

Take note The color will not render if there is no space specified between the frames [see framespacing, border ].

MARGINWIDTH | The internal left and right margins for the frame

The possible value is: integer.
The default value is: 0.
If marginHeight is specified but marginWidth is not, marginWidth is set to 0.

Take note If the document in the frame has margin properties set either through CSS or through the properties of the body element, then this attribute is ignored.

MARGINHEIGHT | The internal top and bottom margins for the frame

The possible value is: integer.
The default value is: 0.
If marginWidth is specified but marginHeight is not, marginHeight is set to 0.

Take note If the document in the frame has margin properties set either through CSS or through the properties of the body element, then this attribute is ignored.

TITLE | To facilitate frame identification and navigation for the disabled

The possible value is: an arbitrary string.
There is no default value.

i.e., <frame src ="navigation.htm" title="Banner and navigation top frame">

NOFRAMES | Not just for older browsers

The noframes tag is a non-HTML 3.2 container tag. It is used in conjunction with frames to enclose HTML that is ignored by frame capable browsers and handled normally by non-frame capable browsers, or in the case of the Opera browser.
The intention is that authors should provide HTML mark-up visible to viewers who are using non-frames capable browsers. It is important to take advantage of this TAG; one should use:

<noframes>

<body>

Any text, hyperlinks, and tags you'd like Search Engines to *see*.

</body>

</noframes>

instead of:

<noframes>

<body>

You need frame support to view this page.

</body>

</noframes>

NUMERAL followed by an `asterisk` | Setting sizes relative to frames

An asterisk [*] is viewed by the browser as the "available space" or "remaining space" [depending on the markup].

For example, it is possible to distribute the "available" width or height among frames using [numeral]* only.

Consider the following:

<frameset cols="1*,2*,3*,4*">

... the frames declaration ...

</frameset>

This tells the browser to create 4 cols: the width of column #1 is equal to the browser window's width divided by 10 [1+2+3+4], #2 is given twice this value, #3 is given three times this value and #4 got the remaining [4 times the original value].

When pixels or % values inside the cols or rows attributes have already been allocated, it is then possible to use [numeral]* to distribute the remaining space in relation to another frame's size.
Consider the following:

<frameset rows="1*,50%,2*">

... the frames declaration ...

</frameset>

In this case, the browser sets the size of the second row to half of the available height. The remaining 50% goes for 1 third to the first row and 2 thirds to the last row. Doing so, we've set the height of the 3rd row to twice the size of the 1st one.
This technique is helpful to set rows or cols size relative to each other instead of the browser window's width or height.

Take note Most of the attributes have a default value [ie. _self for target]. The only ones that cannot be left out are rows and/or cols [in <frameset...>] and src [in >].

Learn about the Web Standards project.