Rows & Cols Together

Now we get to the part where we make framesets that have both rows and columns like in this example. This is done by "nesting" the columns frameset inside the parent "rows" frameset.

To nest a frameset, we just let a child frameset take the place of a <frame> tag inside the parent frameset. Either frameset can be set for rows or columns as needed. There is no limit to how deeply you can nest framesets.

The Parent Frameset

Lets begin coding the example by making the parent frameset. We can see that in the example a "3-row" frameset dominates the overall layout. Our parent frameset, then, will have three rows:

<frameset rows="50,*,50" border=0 frameborder=0 framespacing=0>

<frame src="test10.htm" scrolling="no">

<frameset>

<frame src="test10.htm" scrolling="no">

</frameset>

All we've done in this phase is to make a three-row frameset. The top and bottom rows are sized to 50 pixels each. The center row, which will contain our nested frameset, will take up the remaining screen height.

Now notice that the first and last rows are simple <frame>s. In this case, they are identical. The center row, however, doesn't have a <frame> tag. It has a <frameset> tag instead. We'll be coding our columns in this nested frameset.

Nesting The Child <frameset>

The only big trick to nesting a frameset is knowing where to put it in the HTML code. In our example, the frameset with columns is nested in the second row of a three-row parent frameset. So, all we need to do is put the child <frameset> tag where we'd normally put the second row's <frame> tag.

NOTE: You do not use a <frame> tag for a nested frameset. You use the opening <frameset> tag instead.

Lets start our nested frameset by sizing its column frames:

<frameset rows="50,*,50" border=0 frameborder=0 framespacing=0>

<frame src="test10.htm" scrolling="no">

<frameset cols="100,*">

</frameset>

<frame src="test10.htm" scrolling="no">

</frameset>

The above will size the nested frameset's columns to 100 pixels and the remaining screen space respectively. Also notice that I've added the closing </frameset> tag to close the child frameset. Don't forget to close all framesets. Otherwise, you'll get some really weird displays.

Now all we need to do is add the <frame>s for our nested/child frameset:

<frameset rows="50,*,50" border=0 frameborder=0 framespacing=0>

<frame src="test10.htm" scrolling="no">

<frameset cols="100,*">
<frame src="test5.htm" name="links">
<frame src="test1.htm" name="main">
</frameset>

<frame src="test10.htm" scrolling="no">

</frameset>

That's all there is to it. Just remember to use a <frameset> tag for the child frameset where you'd normally put a <frame> tag.

One other point of interest is that the frames in the parent frameset can load frames in the child frameset without doing anything special. Just use the TARGET attribute and frame NAMEs as usual. This will work as long as all of the frames are in the same window.

Designing Complex <frameset>s

When you're designing a complex, nested frameset, begin by drawing it out with on paper. Will the overall, parent frameset need to be coded as rows or columns? Next, determine how many child framesets you'll need and begin coding with a parent frameset "outline".

The outline should be the parent frameset with any regular frames coded fully, and opening <frameset> tags put where nested framesets will eventually go. It might be handy to code the child framesets on test pages until you've got them right and then copy and paste the code into the parent frameset.

It also pays to heavily <!-- Comment --> your framesets so you'll know which <frameset> and <frame> tags go with which frameset.

Summary & Exercises

Nesting framesets inside parent framesets is how you get framed columns and rows to work together. The toughest part of nesting is figuring out which <frame> the nested <frameset> should replace.

Draw a complex frameset out on paper before you start coding. Use outline code for the overall, parent frameset using opening <frameset> tags to mark where the child framesets will go.

Use <!-- comments --> liberally to help you keep up with all of your frames and framesets.

Now, make the example page from scratch. Next, use COLS in the parent frameset and ROWS in the child frameset to see the effect.

To Next Advanced HTML Lesson

Back To Advanced HTML Index