HTML - Nested Tables

Nested Tables are tables that are located within other table cells. In HTML, 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 (<td>).

Not only can tables be nested, but various HTML tags can also be used within the <td> (table data) tag for arranging contents 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.

How to create Nested Table?

Following are the steps to create nested tables in HTML.

Step 1 - Create Outer Table: Begin by creating the outer table, which serves as the container.

<table border="1">
   <!-- Outer table content -->
</table>

Step 2 - Define Rows and Columns: Within the outer table, define the necessary rows and columns.

<tr>
   <td>
      <!-- Content within the cell -->
   </td>
</tr>

Step 3 - Embed Inner Table: Inside the cell, embed a new table structure using the <table> tags.

<td>
   <table border="1">
      <!-- Inner table content -->
   </table>
</td>

Step 4 - Define Inner Table Content: Within the inner table, define rows and columns as needed.

<tr>
  <td>Inner Content</td>
</tr>

Step 5 - Close Tags: Ensure proper closure of all HTML tags.

</table>

Examples of HTML Nested Tables

Here are some examples that shows how to use nested tables in HTML.

Tables Within Cells

A new table can be defined inside a cell of another table, this is called nested table. The below HTML program creates a table with two columns (Employees and NetWorth). Inside the first column, there's a nested table displaying employee details.

<!DOCTYPE html>
<html lang="en">
<head>
      <style>
         table{
            border-collapse: collapse;
         }
      </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Employees</th>
         <th>NetWorth</th>
      </tr>
      <tr>
         <td>
            <table border="1" >
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>

               <tr>
                  <td>Ramesh </td>
                  <td>5000</td>
               </tr>
               
               <tr>
                  <td>Shabbir </td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>

</body>
</html>

Styling Nested Tables

We can apply style to nested tables of HTML using CSS tag selector. Style written inside 'table' selector will apply to both tables, while style written inside 'table table' selector will only apply on inner table.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
   /* Common style for both tables */
      table {
         border-collapse: collapse;
         width: 100%;
      }
      td,
      th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }
      /* Styling inner table */
      table table {
         border: 2px solid #3498db;
         width: 80%;
         margin: 10px auto;
      }
      table table td {
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
   </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Employees</th>
         <th>NetWorth</th>
      </tr>

      <tr>
         <td>
            <table border="1" >
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>

               <tr>
                  <td>Ramesh </td>
                  <td>5000</td>
               </tr>

               <tr>
                  <td>Shabbir </td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>

   </table>
</body>
</html>

Images in Nested Tables

We can use <img> tag inside tables to arrange images in proper manner. This technique is useful for creating image galleries, product catalogs, or any scenario where images need to be displayed systematically.

<!DOCTYPE html>
<html>
<head>
   <style>
         table{
            border-collapse: collapse;
         }
         img{
            height: 70px;
            width: 200px;
         }
   </style>
</head>

<body>
<table border="1" width="100%">
   <tr>
      <th>Image </th>
      <th>Name</th>
   </tr>

   <tr>
      <td>
         <img src="/images/logo.png">
      </td>
      <td>LOGO </td>
   </tr>

   <tr>
      <td>
         <img src="/html/images/html.jpg">
      </td>
      <td>HTML5 </td>
   </tr>
</table>

</body>
</html>

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.

Print Page