15

enter image description here

Here - I don't want to repeat the same ID, first name and last name to all the subjects so I used expand buttons. - This approach significantly reduces number of rows that are visible when all the rows are in a collapsed state.

But here one drawback is that, if number of subjects are say 10, I am leaving lots of vacant space ( marked with red border ). So need better solution on this problem. Popup is one of the approach but I would prefer any better approach.

Improve this question

3 Answers 3

Reset to default
27

Maybe try having the scoring information appear as a sub-heading under the student's row when you expand it? Something like this.

enter image description here

You'll want to be careful to stylistically de-empasize the sub-headings so that they are obviously part of the expanded row rather looking like the start of a new table.

Improve this answer
5
  • I thought about this but isn't it confusing to include a second level of columns (or a table inside a table)? It might look like Subject 1, Subject 2, are also IDs.
    – Alvaro
    Dec 27, 2016 at 17:14
  • @Alvaro Trading a bit of legibility for a significantly more compact design seems to line up pretty well with the OP's goals. It's certainly a more difficult design to sell, but with a bit of care (maybe a bit more than I exerted here) I think it's entirely doable.
    – Jim
    Dec 27, 2016 at 18:04
  • Perhaps you could put the sub-table in a box, so it looks more separate. EDIT: Never mind, just seen this answer that says the same.
    – wizzwizz4
    Dec 27, 2016 at 18:33
  • 1
    @wizzwizz4 to my mind I want the sub-info to read as an extension of the student row rather than such a distinctly separate thing. If it were me I'd rig up an animation to go off when the expand button is clicked so that the additional information is revealed as the row's height grows.
    – Jim
    Dec 27, 2016 at 19:23
  • Try checking out Ahrefs.com SEO tool's treatment of this if you can (I think they provide some free data). They have these little down arrows that expand to provide "sub-info" on certain reports. I'll admit that it does take a quick introduction to get the hang of it (just pointing out where the arrows are), but once you have this ability it is something you "can't do without". One thing they did was set a slightly different background colour on both the "heading" info and the "sub-info" to indicate that they are part of an "active" group of information. Works very well for this user!!
    – Drewdavid
    Dec 28, 2016 at 20:35
21

Tweaking Jim's answer...

tweak jim

...adding a bit more distinction. Boxing in the child table, vertical lines separating columns, instead of horizontal as in the parent table.

.

Inspired by Tonny's comment, here's some indented examples, for your consideration:

indent 1

indent 2

indent fav

Improve this answer
2
  • hmm... it does actually look a lot cleaner!
    – dalearn
    Dec 28, 2016 at 13:28
  • I like this one, but I would probably "indent" the subjects sub-table a little bit so there is some larger space between its left border and the left border of the ID column. Maybe put the left border of the subjects column in line with the left border of the expand/collapse boxes.
    – Tonny
    Dec 28, 2016 at 15:20
9

A little bit cleaner and following @Bergi and @CoDEmanX suggestions.

enter image description here

Original:

When you expand a row, what you have is:

enter image description here

As the ID, First Name and Last Name is common to all the subjects the info is repeated in each row.

One way to prevent repeating those common fields, and not change the table layout is to use a single field which represents several columns. To reinforce the clarity I suggest adding the borders to each element.

enter image description here

Improve this answer
6
  • 1
    Maybe even omit the vertical border between last name and subject.
    – Bergi
    Dec 27, 2016 at 19:39
  • 1
    [-] 001 ABC PQR should stay aligned to the top IMO, so that it does not "jump" when expanding or collapsing. As long as there are vertical and horizontal lines for the subjects, marks and percentages, it should be clear that ID, First Name and Last Name apply to all rows to the right.
    – CodeManX
    Dec 27, 2016 at 22:37
  • 2
    Don't use JPG for non-photographic images!
    – Andreas Rejbrand
    Dec 28, 2016 at 17:44
  • I like this design but it only slightly solves the problem of the white space that the OP wanted to solve. It only removes one row of white space from the right half of the table but you still have all the white space on the left half. If you have a bunch of subjects (like 10 as the OP states) then you will have a lot of white space.
    – Cave Johnson
    Dec 28, 2016 at 18:29
  • @KodosJohnson White space correctly displayed in a layout can help better understand the content. I didn't really understood there was a space restriction problem and that the table should occupy less. But rather that there were repeated fields and too much white space, which isn't a problem per se and I believe its not an issue in this case. Anyway, the other answers provide good solutions to display the form in a more compact way :)
    – Alvaro
    Dec 28, 2016 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.