HTML: таблица форм?

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

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 и представляет собой огромную боль, с которой приходится иметь дело.

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

Трюк здесь состоит в том, чтобы просто использовать одну форму, например

   

Скажем, у вас есть змея продукта с идентификатором 6. Затем вы указываете вход для количества количественного поля этого элемента [6].

Я не знаю, какой язык на стороне сервера вы используете, но в PHP вы можете перебирать кванты и обновлять на основе идентификатора. Вы бы получили такой массив:

 $_POST['quantity'] = array( '6' => 4 ) 

Вы можете использовать css для отображения таблицы в других элементах.

 .table { display: table; } .table>* { display: table-row; } .table>*>* { display: table-cell; } 

Затем вы используете следующий допустимый html.

 
snake