How to make table with subtable eaisly readable

Question

I want to display a table with some parent and sub data and I am finding it difficult to make it readable

I want to display headings for all the values so the user can understand what they are looking at, but the problem is that when there is a lot of data i.e. when the whole table is longer, it looks like there is too much information on the screen and they may get lost in what they are looking at.

What I did:

• I added all the necessary headers
• I added a margin on the left side for the sub-tables for readability
• I changed the colour of the headings to grey for the sub-tables

The real version has a different font but the example below I think illustrates my problem well

I am looking for solutions on how to present data nicely as below

What I tried

• Remove the headers and for each row before the value e.g. "12" add a text e.g. "Rank: 25"

I am looking for other solutions and inspiration

Answer 1

I'd suggest to make all of the rows end at the same pixel. See how your first rows of "Name, etc" don't align with the second rows of "Name, etc.". Align them to avoid the difference at the right end of the table.

Perhaps, remove the lining on the left side of each row in the first column to make the experience more seamless.