Ken Ward's HTML Tutorial

Columns in Rows (and Rows in Columns)

The picture on the left shows a frames page divided into two rows. The top row is divided into two columns. We know, therefore that we need a frameset with 2 rows to start with. And we want to nest another frameset in the first frame to divide it into two columns.

<html>

<frameset rows="15%,*">

<!-- #######################

We divide the page into two rows. Now this is the start tag for rows. The end tag is at the bottom of the page.

####################### -->

<frameset cols="15%,*">

<!-- #######################

The first row is divided into 2 columns. This is the start tag for the cols frameset. Two frames follow which are the two columns in the FIRST ROW

####################### -->

<frame name="menu" target="main" noresize="noresize" scrolling="no" src="MyMenuPage.htm" />

</frameset>

<!-- #######################

Above is the end frameset for the columns in the first row. The next frame is the second ROW as specified at the start of this frames page in the ROWS frameset.

####################### -->

<frame name="menu" target="main" noresize="noresize" scrolling="no" src="MyMenuPage.htm" />

</frameset>

<!-- #######################

Above is the end frameset for ROWS. The other frameset (for COLS) is nested in this one.

####################### -->

</html>

In the above, we divided the page into rows and had the first row divided into 2 columns.

Now let's end off this section with this one:

frames3ColsManyRows.gif (1493 bytes)

Now although it looks complex, we can do it easily. First make a frameset with, yes ... 3 columns. the next frameset will be rows. And this will be two rows for the lefthand column.

The next frameset will be rows and will have 3 frames. This is for the second column.

And finally, the last frameset will be rows and be divided into 4 frames for the right-hand column. Here's the code (and here it is):

<html>

<frameset cols="20%,40%,*">

<frameset rows="50%,*">

<frame name="menu" target="main" noresize="noresize" scrolling="no" src="MyMenuPage.htm" />

</frameset>

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

<frame name="menu" target="main" noresize="noresize" scrolling="no" src="MyMenuPage.htm" />

</frameset>

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

<frame name="menu" target="main" noresize="noresize" scrolling="no" src="MyMenuPage.htm" />

</frameset>

</frameset>

</html>

At first, I thought this was just an example and of now use at all. But when I saw it, I thought it could be used as a main page showing lots of different subjects or topics. You could do the same thing with a table, though.

It took me about 5 minutes to write this code. I made a mistake and put framesets for columns instead of rows! So that took a minute to correct, which is why it took so long!

Now let's get framed proper!

[HTML Tutorial][Framesets][Frames in Frameset][Columns in Rows]