Мне часто хочется создать таблицу форм - набор строк, каждая строка представляет собой отдельную форму со своими полями и кнопкой отправки. Например, здесьs пример приложения для зоомагазина - представьте, что это экран оформления заказа, который дает вам возможность обновить количество и атрибуты домашних животных, которых выВы выбрали и сохраните изменения перед проверкой:

Pet    Quantity Color Variety   Update
snake         4 black rattle    update
puppy         3 pink  dalmatian update

Я хотел бы иметь возможность сделать это с помощью HTML, который выглядит следующим образом:

 
Pet Quantity Color Variety Update

     
          
            snake
            
            
            
            
          
     

Это в основном таблица, полная форм, по одной форме на строку. Нажав один раз на обновление, вы можете обновить эту конкретную строку (это не реальный пример, мои настоящие приложения действительно требуют независимости строк).

Но это не правильный HTML. Согласно спецификации, должен быть либо полностью внутри или полностью вне, Этот недействительный HTML-код нарушает работу библиотек JavaScript и является огромной болью для решения.

В итоге я создал одну таблицу, содержащую заголовки столбцов, а затем создал одну таблицу для каждой формы. Но это требует фиксированной ширины столбцов, чтобы входы были выстроены в аккуратные столбцы, что является подпарам. Как вы решаете эту проблему? Есть ли очевидное простое решение?м отсутствует? Как мне составить таблицу форм?