Table/grid design for website when a rows column has multiple values

Question

I am designing a website in which users will input data into textboxes of a table, similar to this excel spreadsheet (but imagine textboxes and drop downs instead of table cells)

The highlighted row is the row they are currently adding/modifying. The problem with this approach is that other then the "Uncle information" every other column only has one item. Thus the "Uncle" columns cause the table rows to be larger then they would need to be otherwise.

What is a more aesthetically pleasing way to approach this design problem? The obvious solution I have thought of would be to have another table, with a link/button in the uncle columns for each row that would open that "uncles table" for the child in that row, but if the user is creating a new row, theres no way to visually tie that table to this table because the primary key (childs name, assuming of course we make it unique) has not been defined yet. Thus the "uncles" table would just be a 2 column table (with uncles name and uncle color). Is that ok? Is there a better way to approach this? I was thinking of doing the "uncle" table in a modal popup.

Answer 1

If you want inline editing, you can take inspiration for "tag input" fields, which allow people to write all of the names in one 'field'. This is how Gmail handles adding multiple recipients in a 'To' field:

Traditionally, these require a separator to divide the tags. You could automatically create a new entry when the user enters a space or comma, for example. With a little alteration, placing an 'add' button, you could also allow any text input.

If there are too many entries to be displayed, you can just show the first few and provide a link/button to display the rest. This is how Gmail handles too many recipients:

Answer 2

One possibility would be to have the uncle content in an expandable detail pane within the row. Wave apps does a nice job of this when you have multiple transaction within a single row.

For obvious reasons I have blurred all my acount information. The only example I could quickly find has just one "sub-transaction", but I think you can imageine how this might work. It is essentially a table within a row. This would prevent the need for a modal and retain the visual tie to the "child".

Answer 3

i was wondering the something like this weeks ago. I guess you must show what is really important for the first action. And than, if the user want to, he ca see the next level of information. Like this example. (Like @rdellara said) http://pinterest.com/pin/245235142181302678/

Or you can create an ordered structure without a header column. Like this one.! http://pinterest.com/pin/438678819924356670/

Or, o tooltip with the rest of the datas. Like this:

But, thik again if the user need to know the entire information at first view.

p.s.: i just search the examples, i don´t know