w3schools - table with title html

Sin embargo, otro tema de Divs vs Tables: Formularios

Question

[Meta-nota:] Estaba hojeando la página de preguntas, cansándome realmente de "DIVS vs Tables" "Cuándo usar tablas vs DIVS" "Son Divs mejores que Tablas" "Tablas versus CSS" y todas las preguntas que preguntan LO MISMO HAGA LA COSA DE LAS PERSONAS, pero me gustaría ver todas las formas en que las personas abordan la traducción del ejemplo canónico de "por qué debe darse por vencido y usar tablas":

<table>
  <tr>
    <td> Name </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> Social Security Number </td>
    <td> <input> </td>
  </tr>
</table>

Pregunta: Cómo mejor (semánticamente, simplemente, de manera robusta, fluida y portátil) implementar lo anterior sin tablas. Para empezar, supongo que una implementación ingenua usa un ancho de columna fijo para la primera columna, pero eso puede tener resultados dudosos para el contenido generado dinámicamente. Incluir las fortalezas / debilidades de su enfoque en la respuesta sería bueno.

PD Otra que me pregunto acerca de mucho es el centrado vertical, pero el truco para eso está cubierto bastante bien en jakpsatweb.cz

EDITAR: scunlife presenta un buen ejemplo de por qué no pensé el problema con tanto cuidado. Las tablas pueden alinear múltiples columnas simultáneamente. La pregunta sigue en pie (me gustaría ver diferentes técnicas de CSS utilizadas para la alineación / diseño), ¿aunque las soluciones pueden manejar las suyas? el ejemplo más involucrado definitivamente es el preferido.

Answer 1

El truco es que cuando la forma se vuelve más complicada que su muestra, se da cuenta de que las tablas permiten una "cuadrícula flexible" que no hacen otros elementos.

por ejemplo, ¿qué pasa si la "entrada" es más complicada que un cuadro de texto? por ejemplo, un montón de botones de opción, cada uno con su propia etiqueta:

Color: [____Red___][v]
 Hood: [*] 
 Size: (_) Small
       (_) Medium
       (_) Large
       (*) X-Large

Si todo lo que necesitas son formularios simples, CSS es genial, pero tan pronto como necesites una grilla, las cosas se ponen interesantes ...

Si realmente quieres hacer esto, vería The Man In Blue''s Solution , funciona bastante bien y está muy limpio.

Answer 2

Estaba pensando en algo como:

<div style="text-align:right; float:left;">
    Name: <input /> <br />
    Social Security Number: <input /> <br />
</div>

que, si la columna de la derecha es de longitud fija, se alinea bien con la longitud del texto variable, pero me pregunto cuáles son las desventajas de este método.

Answer 3

Lo que suelo hacer es:

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

y en un CSS:

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

Por supuesto, deberás definir el ancho según tus datos reales :-)

• Primero, proporcione la etiqueta y la display: block entrada display: block , para que se le pueda asignar un tamaño y alinear.
• Ambos float: left porque Explorer hace las cosas un poco diferente
• Formatee la etiqueta muy bien
• piratear el br para que clear: left algún lugar, y recuerdo que ponerlo en la etiqueta no funcionó en ningún navegador.

Además, con el br obtendrá un buen formato, incluso si el navegador no es compatible con CSS :-)

Answer 4

Aunque las otras sugerencias son probablemente mejores para obtener un diseño flexible, la respuesta literal a la pregunta es algo así como:

<form action="www.example.com">
    <div class="table">
        <div class="tbody">
          <div class="tr">
            <div class="td"> <label for="name">Name</label> </div>
            <div class="td"> <input id="name"> </div>
          </div>
          <div class="tr">
            <div class="td"> <label for="ssn">Social Security Number</label> </div>
            <div class="td"> <input id="ssn"> </div>
          </div>
        </div>
    </div>
</form>

con

    <style type="text/css">
        div.table { display:table; border-spacing:2px; }
        div.tbody { display:table-row-group; }
        div.tr { display:table-row; }
        div.td { display:table-cell; vertical-align: middle; padding:1px; }
    </style>

Esto funciona con las últimas versiones de Firefox, Chrome, Opera y Safari. También funciona con IE8 Beta 2 (modo estándar). No funciona con IE7 o anterior, sino con "mejora progresiva" y todo eso.

Answer 5

La gente habla de que las tablas muestran sus formularios de la forma que desean, eso es cierto, SOLAMENTE si desea mostrar sus formularios en columnas y está dispuesto a perder el significado semántico. Con el siguiente HTML en su lugar, es posible mostrar este formulario en tantos diseños como desee.

Por cierto, no a la <br />

<form>
 <fieldset>
  <legend>Personal Info</fieldset>
  <div>
   <label for="name">Name</label>
   <input id="name" name="name" />
  </div>
  <div>
   <label for="ssn">Social Security Number</label>
   <input id="ssn" name="ssn" />
  </div>
 </fieldset>
</form>

Puede borrar los <divs> o configurarlos para que se overflow: hidden para garantizar que los flotantes se borren.

Opciones del html anterior:

Name |==============|    SSN |==============|

Name |==============|
SSN |==============|

Name     |==============|
SSN      |==============|

    Name |==============|
     SSN |==============|

   Name: |==============|
    SSN: |==============|

Name:
|==============|
SSN:
|==============|

Todo lo anterior se puede lograr con solo unas pocas líneas de CSS.

Cuando se trata de radio, casillas de verificación y botones de envío, se vuelve un poco más complicado, pero el HTML semántico limpio PUEDE mostrarse de la manera que se desee usando css.