Nested Data Tables: When to Use Them and How to Build Them

What is a nested data table? A nested data table is a table placed inside a row of another table, so each parent record can show its own set of child records with their own columns. A shipment that contains packages, or an account that contains transactions, are typical examples. Nesting keeps related data together without sending people to another page.

When nesting helps

• The child records have different columns from the parent.
• People need to see a parent's children in context, one parent at a time.
• The hierarchy is real, and people think about the data that way.

When nesting hurts

• More than two levels deep. A table inside a table inside a table becomes hard to scan and harder to use with a keyboard or screen reader.
• People need to compare children across parents. Then the children deserve their own flat table with a filter.
• The child set is huge. Hundreds of nested rows push everything else off screen; link to a detail view instead.

Nested table or expandable row?

They often work together. An expandable row is the interaction: open and close. A nested table is one thing you can put inside it. If the child content is a few fields, use a simple detail panel. If it's a set of records with columns, use a nested table.

Design tips

• Indent the nested table and give it a lighter header so it reads as secondary.
• Repeat the parent's key value in the nested area if the parent row might scroll out of view.
• Keep nested tables short, and page or link out when they grow.

How to nest a table in HTML

Yes, you can put a table inside a table in HTML. Place the inner table element inside a td of the outer table, usually in a row that spans all columns (colspan) directly below its parent row. Give the inner table its own header cells and a caption, so screen readers announce it as a separate table. More in Accessible tables.

Design it and export it

Building nested rows by hand in a design tool means rebuilding them every time the structure changes. In GridForge nested rows are part of the table, and you can export the result as semantic HTML, JSON or React with the HTML table generator.

This guide is part of Data table design: a practical guide.