FRAMESET - Frameset

Syntax	<FRAMESET>...</FRAMESET>
Attribute Specifications	ROWS=`MultiLengths` (row lengths) COLS=`MultiLengths` (column lengths) ONLOAD=`Script` (all frames have been loaded) ONUNLOAD=`Script` (all frames have been removed) core attributes
Contents	One or more FRAMESET and FRAME elements, as well as an optional NOFRAMES
Contained in	HTML

The FRAMESET element is a frame container for dividing a window into rectangular subspaces called frames. In a Frameset document, the outermost FRAMESET element takes the place of BODY and immediately follows the HEAD.

The FRAMESET element contains one or more FRAMESET or FRAME elements, along with an optional NOFRAMES element to provide alternate content for browsers that do not support frames or have frames disabled. A meaningful NOFRAMES element should always be provided and should at the very least contain links to the main frame or frames.

The ROWS and COLS attributes define the dimensions of each frame in the set. Each attribute takes a comma-separated list of lengths, specified in pixels, as a percentage, or as a relative length. A relative length is expressed as i* where i is an integer. For example, a frameset defined with ROWS="3*,*" (* is equivalent to 1*) will have its first row allotted three times the height of the second row.

The values specified for the ROWS attribute give the height of each row, from top to bottom. The COLS attribute gives the width of each column from left to right. If ROWS or COLS is omitted, the implied value for the attribute is 100%. If both attributes are specified, a grid is defined and filled left-to-right then top-to-bottom.

The following example sets up a grid with two rows and three columns:

<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">
  <FRAME NAME="Photo1" SRC="Row1_Column1.html">
  <FRAME NAME="Photo2" SRC="Row1_Column2.html">
  <FRAME NAME="Photo3" SRC="Row1_Column3.html">
  <FRAME NAME="Caption1" SRC="Row2_Column1.html">
  <FRAME NAME="Caption2" SRC="Row2_Column2.html">
  <FRAME NAME="Caption3" SRC="Row2_Column3.html">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
        <UL>
          <LI>
            <A HREF="Row1_Column1.html">Photo 1</A>
            (<A HREF="Row2_Column1.html">Caption</A>)
          </LI>
          <LI>
            <A HREF="Row1_Column2.html">Photo 2</A>
            (<A HREF="Row2_Column2.html">Caption</A>)
          </LI>
          <LI>
            <A HREF="Row1_Column3.html">Photo 3</A>
            (<A HREF="Row2_Column3.html">Caption</A>)
          </LI>
      </UL>
    </BODY>
  </NOFRAMES>
</FRAMESET>

The next example features nested FRAMESET elements to define two frames in the first row and one frame in the second row:

<FRAMESET ROWS="*,100">
  <FRAMESET COLS="40%,*">
    <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
    <FRAME NAME="Content" SRC="main.html" TITLE="Content">
  </FRAMESET>
  <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
      <UL>
        <LI>
          <A HREF="reference/html40/">HTML 4.0 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?">
      </P>
    </BODY>
  </NOFRAMES>
</FRAMESET>

When pixel lengths are used, they should always be combined with a relative length to handle various window sizes. Pixel lengths should only be used when the frame consists primarily of images or other objects with a fixed size in pixels. Due to their ability to adapt to different window sizes, percentages and relative lengths are generally preferred.

The FRAMESET element also accepts ONLOAD and ONUNLOAD attributes to specify client-side scripting actions to perform when the frames have all been loaded or removed.

More Information

FRAMESET in W3C HTML 4.0 Recommendation

Home | HTML Tutorials | JavaScript Editor

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

→