HTML - Nested Tables

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 versatile content integration.

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.

Steps to create nested table

Following are the steps to create nested tables −

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>

Step 6: Complete Outer Table

</table>

This approach allows for a hierarchical structure where the outer table represents a broader section, and the nested table within a cell represents a more detailed subsection.

Example

Following is an example by following the above steps −

<!DOCTYPE html>
<html>
<head>
   <title>Nested Tables</title>
</head>
<body>
   <table border="1" width="100%">
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

Tables Within Cells

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

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

The above HTML program 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.

Styling Nested Tables

Apply styles to nested tables just like regular tables, enhancing visual appeal.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Nested Tables with CSS Styles</title>
   <style>
      table {
         border-collapse: collapse;
         width: 100%;
      }
      td,
      th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }
      /* Additional styles for nested tables */
      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>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

The above HTML program include a main table styled with CSS properties. The `border-collapse` ensures seamless borders, and 'width: 100%' makes it responsive. Cells ('td', 'th') 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'.

Output

Images in Nested Tables

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

Example

<!DOCTYPE html>
<html>
<head>
   <title>Nested Tables</title>
</head>
<body>
   <table border="1" width="100%">
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Image </th>
                  <th>Name</th>
               </tr>
               <tr>
                  <td>
                     <img src="images\logo.png" alt="Nested Image">
                  </td>
                  <td>LOGO </td>
               </tr>
               <tr>
                  <td>
                     <img src="images\html5_icon.png" alt="Nested Image">
                  </td>
                  <td>HTML5 </td>
               </tr>
            </table>
         </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.

Advertisements