I have a Table which contains some basic information for a Product. Upon clicking a row, I wish to show more information (on the same page) for that product where a user can edit certain information. I've tried using a hidden table row between each product that expands when a product row is clicked.

The problem with that is that the <form> element is not allowed inside tables, so this just doesn't feel right to me, there must be a better way to solve this problem?


Two patterns come to mind:

Pop-up modal form when clicking edit in row:

enter image description here


Place the Edit form below when they click on the row.

enter image description here

I would suggest that the pop-up modal form is a bit better, as 'more info' that loads below the data grid might not be visible to the user.

  • Ah, you see the problem with that is, which I forgot to mention is that the current design already has a modal window which pops up when a button is clicked on the more information table row, I think I will go with the edit button and create a SPA type application.. – CallumVass Feb 20 '13 at 13:08

I recommend taking a look at the answers to this question: Best design for displaying list under a list of items ?. One of the suggestions seems particularly relevant to your needs:

enter image description here

This uses nested table rows and allows for inline editing of data, both of which your scenario requires.

(Note: I'm unclear on the restrictions around using <form> in a table. But I know ASP has more-or-less built-in support for inline table editing, so presumably there must be some semantically reasonable way to implement it? But from a UX perspective, that's not a compelling requirement.)


Perhaps using dividers inside of tables? Don't know if that's necessarily a "fix" but it's certainly an option worth trying.

  • I was thinking of using that but the initial information is tabular data so it make's sense to use a table.. – CallumVass Feb 20 '13 at 12:49

One downfall using a modal window over the table is having the information in the table behind, and users may not be able to view it if necessary.

If only three columns can be edited, I would recommend inline editing. enter image description here

See Designing Web Interfaces

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.