Maquetar con divs como si fuese una tabla
Muchos de los que comenzamos maquetando, comenzamos a extrañar los comportamientos que tenian las tablas, y que era algo facil de acomodar los elementos.
Pero recordemos que ahora las tablas no se usan para maquetacion, en cuanto al diseño se refiere. Las tablas se deberÃan usar para tabular datos, como un listado de varios elementos.
Lo bueno del caso es que existe una manera de «imitar» el comportamiento de las tablas con capas, gracias a la propiedad display.
Muchos de los que comenzamos a maquetar conocemos las básicas que son:
display:
block
Inline
None
pero además existen:
display:
table
table-row
table-cell
Las anteriores propiedades son las necesarias para poder imitar el comportamiento de una tabla ya que tendriamos el elemento <table>, <tr> y <td>
Aca la demostración:
Partamos con un ejemplo de una tabla, que tiene 3 columnas:
Es una estructura sencilla para representar una tabla de 1 fila y 3 columnas. Ahora llevando este mismo concepto a divs tendriamos un resultado como el siguiente:
Teniendo en cuenta la grafica anterior:
TendrÃamos nuestros equivalentes:
<table> serÃa equivalente a <div class=»contenedor-tabla«>
<tr> serÃa equivalente a <div class=»contenedor-fila«>
<td> serÃa equivalente a<div class=»contenedor-columna«>
Yo creo que ya esta entendida la idea. Nuestro codigo html serÃa:
HTML
<div class=»contenedor-tabla»>
  <div class=»contenedor-fila»>
    <div class=»contenedor-columna»>
Columna 1
     </div>
    <div class=»contenedor-columna»>
       Columna 2
    </div>
    <div class=»contenedor-columna»>
Columna 3
    </div>
  </div>
</div>
CSS
.contenedor-tabla{
display: table;
}
.contenedor-fila{
display: table-row;
}
.contenedor-columna{
display: table-cell;
}
Muy buen ejemplo, me ayudo de mucho. Muchas gracias
Me alegra que te haya servido. Gracias por tu visita!
¿Creando mas ‘divs’ se harÃan las filas?
Claro que si en este ejemplo solo tenemos una fila, si quisieras crear mas filas tendrias que duplicar el div que tiene la clase «contenedor-fila».
Por ejemplo. Tomando mi ejemplo, con 3 Columnas, voy a añadir 2 filas mas, en total serian 3 filas:
con esta estructura como se combinan filas y columnas
si te refieres al colspan, rowspan de las tablas, no he intentado hacerlo, ya que las tablas solo deberian usarse para listar datos, el resto solo con divs.
Pero tal vez te pueda servir este articulo:
EXCELENTEEEE… sinceramente excelente explicacion, la mas visual, la mas grafica, la ,mas sencilla, clara y QUE FUNCIONA!!! hace dias que ando buscando una forma correcta de conseguir este resultado sin poder hacerlo. Muchas soluciones en la web y mucha gente comn buena voluntad ayudando, pero nadie tan didactico y sencillo. MUCHISIMAS GRACIAS!!!
Gracias a ti por visitar nuestro blog, trato de hacer lo mas entendible los tutoriales, precisamente para que las ideas se entiendan bien. Saludos!
hola, me parece una explicación genial pero estoy intentando que una columna tenga dos filas y no se me ocurre cómo hacerlo…. alguna idea? gracias!!
Claro! mira colocas divs dentro de cada columna y tienes las filas
Buenas!! Como se podria centrar el contenido?? He probado a poner Columna1
Pero no me hace caso, tambien he probado dentro del CSS a poner float:center
y pasa de mi…
Alguna sugerencia?
Gracias de antemano!
Echale un vistazo a este link:
http://blog.iguazoft.com/wp-content/uploads/2012/07/divTablas.html
Hola! Muy pero muy buen post, me ha ayudado mucho 🙂 Me gustarÃa preguntarte si se puede hacer que en la 1° fila hayan dos columnas y en la 2° fila solo una columna que ocupe los espacios de las columnas de la fila 1, no sé si me explico bien. Espero puedas responderme y gracias por compartir tus conocimientos 🙂 Saludos!
Excelente tu ilustracion, tus ejemplos son cortos y efectivos, y la forma de explicar con dibujos las similitudes entre tablas y Divs, no tiene precio.. Felicidades y gracias por dedicar algo de tu valioso tiempo a los que estamos aprendiendo….
Buenas, a ver si alguien me puede ayudar…
Tengo que pintar un listado de horas de esta manera
09:00 09:40 12:00
09:10 09:50 13:00
09:20 10:00
09:30 11:00
Tres columnas, suponiendo que la lista de horas esta en un array ordenado horas, usando solo table me resulta imposible, cómo podrÃa hacerlo con div??
Gracias
Hola que tal?
SI dices que los horarios estan en un array ordenado lo mas simple seria listarlo pero veritcalmente es decir:
09:00 09:10 09:20
09:30 09:40 09:50.
Pero puedes ordenarlas como tu quieres, pero es haciendo uso de CSS3, con la propiedad column-count de la siguiente manera:
Muchas Gracias es justo lo que andaba buscando
Mi comentario
Hola, genial tu explicación y más visual de ahà no se puede 😀
Tengo 2 preguntas:
1. Estoy usando Dreamweaver para hacer el ejemplo ..pero después de pegar el código html y el CSS no me aparece en dreamweaver tal cual como aparece al previsualizar en el navegador … hay forma de lograr que en dreamweaver vaya viendo tal cual como saldrá en la previsualización?
2. la ventaja de usar las tablas es que por ejemplo en una de tus respuestas pusiste 4 filas en la última columna …eso harÃa que la primera y segunda columna se estirarÃan …pero con los DIVS no pasa eso … cómo puedo hacer que la columna1 de la fila 2 y la columna 2 de la fila2 tomen el alto que se está generando por poner la columna 3 fila 3 y la columna 3 fila 4?
Mil gracias
Qué chingona manera de explicar las cosas, me encantó
Excelente aporte, pero me gustarÃa saber cuando cambio una tabla que adentro tiene tbody y dentro de esa tabla en una columna tiene otra tabla? al pasarlas a divs cómo seria? 🙁 esto parecÃa sencillo como lo explicaste en tu ejemplo pero no en los proyectos reales jaja podrÃas aconsejarme en este caso o me recomiendas usar boostrap o algun otro frameworkd para que me ahorre trabajo tiempo y demás?. Aunque me gustarÃa saber como serÃa la parte del tbody 🙁
ordenes:
codigos:
actividad:
partes:
caracteristicas:
Este es el mejor tip que me podrÃas haber dado, llevo años sin poder usar las DIVs de este modo, y la solución eran tan pero tan sencilla que casi muero xDDD jajajaja!! MuchÃsimas gracias por el tip!!! 😀 😀 😀 😀
Muchas gracias. De lo mejor que he encontrado. Sencillo, claro y práctico. Felicitaciones.
Mas facil imposible! gracias!