HTML - Nested Tables

Previous
Quiz
Next

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 <td> 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 (<td>).

Not only can tables be nested, but various HTML tags can also be used within the <td> (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:

HTML 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.

<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>

Example of Nested Tables

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

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.

<!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>

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 (<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'.

<!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>

Images in Nested Tables

Embedding images within nested tables enhances visual presentation. Use the <img> 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:

<!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.

Print Page
Previous
Next
Advertisements