Думаю, это зависит от формы.Некоторые формы могут иметь смысл как таблица - например, та, где у вас есть серия пар ключ-значение:
<table>
<tr>
<th scope="row"><label for="first-name">First Name:</label></th>
<td><input type="text" name="first_name" id="first-name" /></td>
</tr>
<tr>
<th scope="row"><label for="last-name">Last Name:</label></th>
<td><input type="text" name="last_name" id="last-name" /></td>
</tr>
<tr>
<th scope="row"><label for="color">Favorite Color:</label></th>
<td><input type="text" name="color" id="color" /></td>
</tr>
</table>
Комбинация элементов LABEL с использованием атрибутов FOR, которые соответствуют идентификатору ассоциированного элементаINPUT означает, что программы чтения с экрана смогут разумно читать форму.Я добавил элементы TH, чтобы указать семантическое отношение в таблице между ячейками LABEL и ячейками INPUT.
Однако сделать это таким образом не будет моим первым выбором.Наличие разметки таблицы усложнит прослушивание чтения с экрана из-за объявления каждой строки / ячейки таблицы.Некоторая семантическая информация из таблицы (связь заголовка TH с TD в строке) фактически дублирует семантическую связь между LABEL и INPUT, так что с помощью программы чтения с экрана вы можете дважды прослушивать ту же информацию о том, какэти вещи связаны между собой.
Вместо этого я бы сделал что-то вроде этого:
<style type="text/css">
label { display: block; text-align: right; }
label input { width: 100px; }
</style>
<label for="first-name">First Name: <input type="text" name="first_name" id="first-name" /></label>
<label for="last-name">Last Name: <input type="text" name="last_name" id="last-name" /></label>
<label for="color">Favorite Color: <input type="text" name="color" id="color" /></label>
Это дало бы вам почти такой же эффект с меньшим количеством HTML.У него есть метки, связанные с их входами как явно (с использованием FOR / ID), так и неявно (потому что входы являются дочерними элементами LABEL).Это означает, что вы должны быть в состоянии предвидеть, насколько широкими должны быть ваши входные данные, а левый край изрезан из-за выравнивания текста по правому краю.
Существует также проблема добавления флажков иРадио-кнопки.В их случае имеет смысл сначала иметь ввод, а затем метку;но с примером, который я привел, это выглядит не очень хорошо.
Итак, в основном?Форматирование форм - это боль в заднице.Хотя они часто состоят из пар имя-значение, которые имеют логический смысл в виде таблицы, при таком подходе существуют потенциальные проблемы доступности.Я бы настоятельно предпочел избегать основанных на таблицах решений для такой проблемы, если только у вас нет веских причин для использования таблиц.