ejemplos - Reemplazar la tabla HTML con Divs

tabla responsive html

Question

De acuerdo, estoy tratando de convencerme de que las tablas html no deberían usarse, y que deberían ser divs. Sin embargo, a menudo tengo un código que se parece al siguiente

<table>
<tr>
<td>First Name:</td>
<td colspan="2"><input id="txtFirstName"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td colspan="2"><input type="text" id="txtLastName"/></td>
</tr>
<tr>
<td>Address:</td>
<td>
<select type="text" id="ddlState">
<option value="NY">NY</option>
<option value="CA">CA</option>
</select>
</td>
<td>
<select type="text" id="ddlCountry">
<option value="NY">USA</option>
<option value="CA">CAN</option>
</select>
</td>
</tr>
</table>

Quiero que las etiquetas estén alineadas y quiero que los controles estén alineados. ¿Cómo haría esto sin usar tablas?

Answer 1

Básicamente se reduce a utilizar una página de ancho fijo y establecer el ancho de esas etiquetas y controles. Esta es la forma más común en que se implementan diseños sin tablas.

Hay muchas formas de configurar el ancho. Blueprint.css es un framework css muy popular que puede ayudarte a configurar columnas / anchos.

Answer 2

Busqué una solución fácil y encontré este code que funcionó para mí. La div right es una tercera columna que dejé para lectura.

Aquí está el HTML:

<div class="container">
<div class="row">
<div class="left">
<p>PHONE & FAX:</p>
</div>
<div class="middle">
<p>[phone]</p>
</div>
<div class="right"> </div>
</div>
<div class="row">
<div class="left">
<p>Cellphone Gert:</p>
</div>
<div class="middle">
<p>[phone]</p>
</div>
<div class="right"> </div>
</div>
<div class="row">
<div class="left">
<p>Cellphone Petra:</p>
</div>
<div class="middle">
<p>[phone]</p>
</div>
<div class="right"> </div>
</div>
</div>

Y el CSS:

.container {
display: table;
}
.row {
display: table-row;
}
.left, .right, .middle {
display: table-cell;
padding-right: 25px;
}
.left p, .right p, .middle p {
margin: 1px 1px;
}

Answer 3

Esto debería hacer el truco.

<style>
div.block{
overflow:hidden;
}
div.block label{
width:160px;
display:block;
float:left;
text-align:left;
}
div.block .input{
margin-left:4px;
float:left;
}
</style>
<div class="block">
<label>First field</label>
<input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
<label>Second field</label>
<input class="input" type="text" id="txtLastName"/>
</div>

Espero que entiendas el concepto.

Answer 4

Puede crear formularios simples basados ​​en flotador sin tener que perder su diseño de líquido. Por ejemplo:

<style type="text/css">
.row { clear: left; padding: 6px; }
.row label { float: left; width: 10em; }
.row .field { display: block; margin-left: 10em; }
.row .field input, .row .field select {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
}
</style>
<div class="row">
<label for="f-firstname">First name</label>
<span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
<label for="f-state">State</label>
<span class="field"><select name="state" id="f-state">
<option value="NY">NY</option>
</select></span>
</div>

Sin embargo, esto tiende a romperse cuando tiene diseños de formularios complejos en los que hay una grilla de columnas de ancho fijo y flexible. En ese punto, debe decidir si se queda con los divs y abandona el diseño de los líquidos para dejarlo todo en posiciones fijas de píxeles, o dejar que las tablas lo hagan.

Personalmente, el diseño líquido es una característica de usabilidad más importante que los elementos exactos utilizados para diseñar el formulario, por lo que generalmente utilizo tablas.

Answer 5

Tenga en cuenta que, aunque se desaconsejan las tablas como un medio principal de diseño de página, todavía tienen su lugar . Las tablas pueden y deben usarse cuando y donde corresponda y hasta que algunos de los navegadores más populares (ejem, IE, ejem) se vuelvan más compatibles con los estándares, las tablas son a veces la mejor ruta para llegar a una solución.

Answer 6

hay una herramienta en línea muy útil para esto, solo transforma automáticamente la tabla en divs:

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

Y el video que lo explica: https://www.youtube.com/watch?v=R1ArAee6wEQ

Estoy usando esto diariamente. Espero que ayude ;)