How to include frameset inside another frameset in HTML ?

Last Updated : 04 Oct, 2021

The frameset is the collection of frames in the browser window. It is used to specify the number of rows and columns in a frameset with their pixels of space. There are some real-world applications of frameset like while making the website for any purpose, the developer first makes the design of the whole website where he divides the whole website into some frames such that each frame has some function. Let’s take an example of a news website, there are various sections like trending, latest, business, cricket news, etc and there is also a slider in some websites which scrolls the image after some seconds.

In this article, we will discuss for creating a nested frameset or a frameset inside another frameset. Let’s see an example to understand the topic much better. Comments are added in the code for better understanding.

Example

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Nested Framesets in HTML</title> 
</head> 
  
<!-- Frameset tag starts from here -->
  
<!-- We divide the whole website into three rows -->
<!-- "*" divides equally based on the left space -->
<frameset rows="50%,*,*"> 
  
    <!-- Here we are defining the columns  
        in the first row -->
    <!-- It is set to 100% which means that  
        it will cover first row by 100% -->
    <frameset cols="100%"> 
  
        <!-- Defining the frame which is  
            to be inserted -->
        <frame name="frame1" src="frame1.html"> 
  
    </frameset> 
  
    <!-- Here we are defining the columns  
        in the second row -->
    <frameset cols="*, *, *"> 
        <frame name="frame2" src="frame2.html"> 
        <frame name="frame3" src="frame3.html"> 
        <frame name="frame4" src="frame4.html"> 
    </frameset> 
  
    <!-- Now the final third row which will  
        cover the rest space -->
    <frame name="frame5" src="frame5.html"> 
  
</frameset> 
<!-- frameset tag ends here -->
  
</html>

Below are the codes for frame1.html, frame2.html, frame3.html, frame4.html, frame5.html:

frame1.html

<html> 
  
<head> 
    <title>frame1</title> 
</head> 
  
<body bgcolor="aqua"> 
    <center> 
        <img src="gfglogo.png" alt="gfglogo"
            width="400" height="350"><br> 
        frame1 
    </center> 
</body> 
  
</html>

frame2.html

<html> 
  
<head> 
    <title>frame2</title> 
</head> 
  
<body bgcolor="hotpink"> 
    frame2 
</body> 
  
</html>

frame3.html

<html> 
  
<head> 
    <title>frame3</title> 
</head> 
  
<body bgcolor="lightgreen"> 
    frame3 
</body> 
  
</html>

frame4.html

<html> 
  
<head> 
    <title>frame4</title> 
</head> 
  
<body bgcolor="grey"> 
    frame4 
</body> 
  
</html>

frame5.html

<html> 
  
<head> 
    <title>frame5</title> 
</head> 
  
<body bgcolor="yellow"> 
    frame5 
</body> 
  
</html>

Output:

Suggest improvement

How to create frames ?

jQWidgets jqxTreeGrid ensureRowVisible() Method

Share your thoughts in the comments