A nested table in HTML is a table placed inside a cell of another table. This technique is commonly used when you want to organize complex or grouped data within a single layout.
Why Use Nested Tables?
Nested tables can help in the following situations:
-
When you need to show hierarchical or grouped data.
-
To build a structured layout inside a main table.
-
In cases like report cards, invoices, product descriptions, and data grids.
Basic Structure of a Nested Table
Here is the basic HTML structure for creating a nested table:
This layout places a new table within a single <td> (cell) of the outer table.
Step-by-Step Explanation
-
Outer Table
This is the main table where the data is shown. -
Inner (Nested) Table
Inside one of the cells (<td>) of the outer table, you can insert a complete table (<table>...</table>), which becomes the nested table. -
Attributes
You can use attributes likeborder,cellpadding, andcellspacingto improve the look.
Full Example of a Nested Table
Common Use Cases
-
School report cards with subject-wise marks inside a student row.
-
Product catalogs where each product has a nested table showing its features.
-
Invoices showing item breakdown inside each purchase order row.
-
Forms designed in table layout for better alignment.
Best Practices
-
Only use nested tables for data presentation, not for page layouts.
-
Avoid deeply nested tables — one level of nesting is usually enough.
-
Use proper spacing and borders to maintain clarity.
-
Use CSS classes to style inner and outer tables differently for better design.
Styling Tip with CSS
Nested tables are a powerful way to organize and present data within a tabular layout. Although not commonly used for modern layouts (which rely on Flexbox and Grid), they are still very useful for structured and grouped data display within HTML documents.
