Maquetar con divs como si fuese una tabla

julio 23, 2012

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;

}

24 respuestas a «Maquetar con divs como si fuese una tabla»

MArquez

mayo 30, 2013

Muy buen ejemplo, me ayudo de mucho. Muchas gracias

Responder
1. Guillermo Aguilar Cruz
  
  mayo 30, 2013
  
  Me alegra que te haya servido. Gracias por tu visita!
  
  Responder

boris

junio 13, 2013

Â¿Creando mas ‘divs’ se harÃan las filas?

Responder

Guillermo Aguilar Cruz

junio 13, 2013

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:

<div class="contenedor-tabla">
            <div class="contenedor-fila">
                <div class="contenedor-columna">Columna 1 fila1</div>
                <div class="contenedor-columna">Columna 2 fila1</div>
                <div class="contenedor-columna">Columna 3 fila1</div>
            </div>
            <div class="contenedor-fila">
                <div class="contenedor-columna">Columna 1 fila2</div>
                <div class="contenedor-columna">Columna 2 fila2</div>
                <div class="contenedor-columna">Columna 3 fila2</div>
            </div>
            <div class="contenedor-fila">
                <div class="contenedor-columna">Columna 1 fila3</div>
                <div class="contenedor-columna">Columna 2 fila3</div>
                <div class="contenedor-columna">Columna 3 fila3</div>
            </div>
        </div>

Responder

Juan Piojo

julio 10, 2013

con esta estructura como se combinan filas y columnas

Responder
1. Guillermo Aguilar Cruz
  
  julio 10, 2013
  
  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:
  
  Responder

Lola Lola

noviembre 10, 2013

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!!!

Responder
1. Guillermo Aguilar Cruz
  
  noviembre 10, 2013
  
  Gracias a ti por visitar nuestro blog, trato de hacer lo mas entendible los tutoriales, precisamente para que las ideas se entiendan bien. Saludos!
  
  Responder

noviembre 19, 2013

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!!

Responder

Guillermo Aguilar Cruz

enero 11, 2014

Claro! mira colocas divs dentro de cada columna y tienes las filas


<body>
	<div class="contenedor-tabla">
		<div class="contenedor-fila">
			<div class="contenedor-columna">
				<div>Columna1 Fila1</div>
				<div>Columna1 Fila2</div>
			</div>

			<div class="contenedor-columna">
				<div>Columna1 Fila1</div>
				<div>Columna1 Fila2</div>
			</div>
			<div class="contenedor-columna">
				<div>Columna1 Fila1</div>
				<div>Columna1 Fila2</div>
				<div>Columna1 Fila3</div>
				<div>Columna1 Fila4</div>
			</div>
		</div>
	</div>
</body>

Responder

Ricchar

enero 10, 2014

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!

Responder
1. Guillermo Aguilar Cruz
  
  enero 11, 2014
  
  Echale un vistazo a este link:
  
  https://blog.iguazoft.com/wp-content/uploads/2012/07/divTablas.html
  
  Responder
Macarena

enero 12, 2014

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!

Responder
Gerardo

enero 30, 2014

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….

Responder
Spg

abril 10, 2014

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

Responder
1. Guillermo Aguilar Cruz
  
  abril 24, 2014
  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:
  
  <!DOCTYPE html> <html> <head> <style> .newspaper { column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } </style> </head> <body> <p><strong>Note:</strong> The column-count property is not supported in Internet Explorer 9 and earlier versions.</p> <ul class="newspaper"> <li>1:00</li> <li>1:10</li> <li>1:20</li> <li>1:30</li> <li>1:40</li> <li>1:50</li> <li>2:00</li> <li>2:10</li> <li>2:20</li> <li>2:30</li> <li>2:40</li> <li>2:50</li> </ul> </body> </html>
  
  Responder
Cristinity

junio 29, 2014

Muchas Gracias es justo lo que andaba buscando

Responder
a

julio 6, 2014

Mi comentario

Responder
Carlos Ceron

noviembre 2, 2014

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

Responder
Akire

junio 25, 2015

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:

Responder
quinqui

agosto 10, 2015

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!!! 😀 😀 😀 😀

Responder
tonilazarenotoni

diciembre 11, 2015

Muchas gracias. De lo mejor que he encontrado. Sencillo, claro y prÃ¡ctico. Felicitaciones.

Responder
Felipe

febrero 26, 2019

Mas facil imposible! gracias!

Responder

Iguazoft

Maquetar con divs como si fuese una tabla

display:

display:

HTML

CSS

24 respuestas a «Maquetar con divs como si fuese una tabla»

Deja una respuesta Cancelar la respuesta