HTML - Nested Tables

---

---

Nested Tables

HTML nested tables refer to the table where one or more tables are placed inside it; the inner tables are placed inside the tag. The nested tables involve the utilization of one table within another, providing a versatile way to structure complex data layouts. Various elements, including other HTML tags, can be incorporated within table cells ().

Not only can tables be nested, but various HTML tags can also be used within the (table data) tag for arranging contents in a structured manner.

Basic Structure of Nested Tables

Nested tables refer to the practice of embedding an entire table structure within a cell of another table. This technique allows for the creation of more complex and structured layouts in HTML.

See this image of how a nested table looks like i.e., this image demonstartes a structure of nested tables:

How To Create a Nested Table?

You can create a nested table in HTML by creating one or more tables in different table cells. The following are the steps to create an HTML nested table:

Step 1: Create Outer Table

Begin by creating the outer table, which serves as the container.

Step 2: Define Rows and Columns

Within the outer table, define the necessary rows and columns.

Step 3: Embed Inner Table

Inside the cell, embed a new table structure using the

tags.

Step 4: Define Inner Table Content

Within the inner table, define rows and columns as needed.

Step 5 - Close Tags

Ensure proper closure of all HTML tags.

Inner Content

Example of Nested Tables

Following is an example by following the above steps −

   


   

      

         

            

               

                  
Name
                  
Salary
               
               

                  
Ramesh Raman
                  
5000
               
               

                  
Shabbir Hussein
                  
7000
               
            
         
      
   

Tables Within Cells

Tables can be nested within table cells, allowing for complex structures.

Example

The following example creates a table with two columns (Name and Salary). Inside the first column, there's a nested table displaying employee details with the same columns.

The outer table's header and data rows are defined, and the inner table showcases two employees, Ramesh Raman, and Shabbir Hussein, with corresponding salaries.

   
   


   

      

         
Name
         
Salary
      
      

         

            

               

                  
Name
                  
Salary
               
               

                  
Ramesh Raman
                  
5000
               
               

                  
Shabbir Hussein
                  
7000
               
            
         
      
   

Styling Nested Tables

You can apply styles to nested tables just like regular tables to enhance visual appearance. To write CSS styles for nested tables, you can simply apply the CSS rules on the 'table' selector to style the outer table and use the 'table table' selector to style the inner tables.

Example

The following code includes a main table styled with CSS properties. The `border-collapse` ensures seamless borders, and 'width: 100%' makes it responsive. Cells (, ) have padding, border, and text alignment.

Additionally, nested tables within cells inherit a distinctive style, including a colored background and borders. The main table's data cell contains a nested table with a blue border, 80% width, and centered using 'margin: 10px auto'.

   
   
   
   


   

      

         
Name
         
Salary
      
      

         

            

               

                  
Name
                  
Salary
               
               

                  
Ramesh Raman
                  
5000
               
               

                  
Shabbir Hussein
                  
7000
               
            
         
      
   

Images in Nested Tables

Embedding images within nested tables enhances visual presentation. Use the tag inside table cells to seamlessly integrate images into complex layouts like nested tables.

Example

The following example illustrates the use of images inside nested tables:

   


   

      

         

            

               

                  
Image 
                  
Name
               
               

                  

                     
                  
                  
LOGO 
               
               

                  

                     
                  
                  
HTML5 
               
            
         
      
   

Benefits of Nested Tables

Following are the advantages of the nested tables −

• Organized Layouts − Nested tables enable the creation of organized and structured layouts, enhancing the presentation of complex data.

• Cell Customization − Each cell in a nested table can contain diverse content, including text, images, or even additional nested tables.

• Complex Designs − Achieve intricate design patterns by nesting tables within cells, providing flexibility in webpage design.