Depende de la forma, creo.Algunas formas pueden tener sentido como una mesa - por ejemplo, una de las que tiene una serie de pares de valores clave:
<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>
La combinación de elementos etiqueta utilizando los atributos que corresponden a la identificación de los medios de entrada asociados que los lectores de pantalla podrán leer el formulario con sensatez. He agregado elementos TH para indicar la relación semántica dentro de la tabla entre las celdas LABEL y las celdas INPUT.
Sin embargo, hacerlo de esa manera no sería mi primera opción. La presencia del marcado de la tabla hará que sea más laborioso escuchar usando un lector de pantalla, debido al anuncio de cada fila/celda de la tabla. Parte de la información semántica de la tabla (la asociación del encabezado TH con los TD en la fila) realmente duplica el vínculo semántico entre LABEL y INPUT, de modo que con un lector de pantalla puede terminar escuchando dos veces la misma información sobre cómo estas cosas están relacionadas.
En su lugar, me gustaría hacer algo como esto:
<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>
que le daría el mismo efecto con menos de HTML. Tiene las etiquetas asociadas con sus entradas tanto explícitamente (usando FOR/ID) como implícitamente (porque las INPUT son elementos secundarios de las LABEL). Significa que debe ser capaz de anticipar qué tan amplias deben ser sus entradas, y hay un margen izquierdo irregular debido a que todo el texto se alinea a la derecha.
También existe el problema de agregar casillas de verificación y botones de opción. En su caso, tiene sentido tener la entrada primero y la etiqueta después; pero eso no se ve muy bien con el ejemplo que he dado.
Entonces, básicamente? Formatear formas es un dolor en el trasero. Aunque a menudo consisten en pares nombre-valor que tendrían un sentido lógico como tabla, existen posibles problemas de accesibilidad con ese enfoque. Preferiría mucho evitar las soluciones basadas en tablas para un problema como este, a menos que tenga un motivo convincente para usar tablas.
"Todos sabemos que es incorrecto utilizar una tabla como una ayuda de diseño" que no sé que. Usas lo que es más simple y funciona. –
Si comprueba la especificación de HTML5, lo dice exactamente en estas palabras: http://www.w3.org/wiki/HTML/Elements/table – Richard
Wow. En mi opinión, la especificación es incorrecta. –