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.