Another way to show a sub-row in a table?

Question

I'm trying to determine a way that shows sub-rows for a table. Typically the indentation of the row means that it is a sub-row of the parent.

The table can have a single row of children from the parent, so other visual aspects may work such as expanding etc.

I'm curious as to other ways to represent this relationship that doesn't involve indenting the children.

Example:

Answer 1

For these types of tables, it's usually helpful for the user to allow folding. That also helps distinguish the parent/child relationship.

Answer 2

From my experience, users prefer accordion menus. There are tons of great examples out there, simply Google "accordion menus UI":

However, to do a deeper dive, especially if you have a mobile project or a demanding client/stakeholder that wants substantiated design decision making, you need to know the following;

• Is your "table" more of a data table that will allow users to select multiple subrows after clicking on the parent row to sort and group various data points?
• Or is it more of a menu that will only allow users to view subrows from parent rows and click the links to follow to the page? (This brings up a whole other discussion on how to display the "table"/menu as users navigate through the different pages it links to -- fixed, accordion, hamburger menu, etc.)

I'm guessing you're looking for a solution for more of a menu-like table.

Google's Material Design advocates for nesting.

Alternatively, an expansion panel might be what you're looking for especially if the table allows users to interact with the subrows.

Answer 3

You could show decrease the size of an object within your row showing the hierarchical order without changing the size of the lower content.

Answer 4

If it must be text-based, you can use the same approach of the tree command (copy and paste those special characters):

.
├── animals
│   ├── fishes
│   │   ├── nemo
│   │   └── swordfish
│   └── mammals
│       ├── dog
│       ├── elephant
│       └── lion
└── plants
    ├── bushes
    │   └── maple
    └── trees
        ├── cedrela
        └── mahogany

Answer 5

In addition to what other users said, i.e. shaded background color, indentation, accordion etc., I think 3D beveling also helps. You can show your sub rows like they are deeper than their parent row by adding shadows to the corner of your preference.

Also, the parent row should have an accordion functionality and an indication of it, a different background color or a drop-down symbol.

In the image, bevel shadow is added to the top-left corner of the sub-table. But a smaller shadow should also be added to the opposite corner to make it more 3D looking. It was a bit hard to do it using CSS so I didn't.

Here is a very basic fiddle that generates the above table.

Answer 6

For data tables with zebra striping you need a different approach than given in previous answers. In this case you can use the odd/even row color in your advantage:

Answer 7

You can use expandable rows to show hierarchies in a table, like in this Grid example.