In this lesson, you'll learn how to create tables within tables to organize complex data. Nested tables help you display multi-dimensional data or grouped information clearly, by embedding one table inside another.

What Are HTML Nested Tables?

HTML nested tables are tables placed inside a cell of an outer table. This technique is useful when you want to:

• Group related data within a particular section of your main table.
• Create a more complex layout without losing structure.

Syntax

The basic idea is to include a <table> tag inside a <td> cell of an outer table.

<table>
  <tr>
    <td>
      <!-- Outer cell content -->
      <table>
        <!-- Nested table content -->
      </table>
    </td>
  </tr>
</table>

• The outer <table> organizes the primary data.
• The inner <table> (nested table) is embedded within a <td> cell and can have its own rows and cells.

Example of HTML Nested Tables

Below is a complete HTML example that demonstrates a nested table. In this example, the outer table displays product information, and one of the cells contains a nested table showing detailed specifications.

Explanation:

• Outer Table:
  • Displays product names and a "Details" column.
  • Each product row is represented by a <tr> tag.
• Nested Tables:
  • Placed inside the "Details" <td> cell.
  • Each nested table has its own header row (using <th> tags) for specifications and the corresponding values.
  • This structure clearly separates the main product information from detailed technical specifications.

With nested tables, you can effectively present multi-dimensional data, making your web pages more structured and easier to understand.