Resumen de propiedades css para hacer tablas con display:table

Resumen de propiedades css para hacer tablas con display:table

5
(2)

Cada vez que un diseñador oye la idea de maquetar con tablas le recorre el cuerpo un escalofrío .

Existen muchas razones para no maquetar con tablas.

Sin embargo CSS 2.1 incorporó un sistema para hacer tablas sin que en realidad lo fueran. Ofrece muchas posibilidades.

Mi chuleta de propiedades css para hacer tablas sin html

.table{display:table;}
.tr{display:table-row;}
.td,.th{display:table-cell;}
.table-thead{display:table-header-group;}
.table-tbody{display:table-row-group;}
.table-tfoot{display:table-footer-group;}
.table-caption{display:table-caption;}
.col{display:table-column;}
.colgroup{display:table-column-group;}

Ejemplo de creación de una tabla con display:table

<!DOCTYPE html>
<html>
<head>
	<title>tabla con display:table</title>
	<style>
		*{box-sizing:border-box;margin:0;padding:0;}
		.table{display:table;}
		.tr{display:table-row;}
		.td{
			display:table-cell;
			width:150px;
			height:150px;
			border:1px solid #000;
			text-align:center;
			vertical-align: middle;
		}
	</style>
</head>
<body>

	<div class="table">
		<div class="tr">
			<div class="td">1</div>
			<div class="td">2</div>
			<div class="td">3</div>
			<div class="td">4</div>
		</div>
		<div class="tr">
			<div class="td">5</div>
			<div class="td">6</div>
			<div class="td">7</div>
			<div class="td">8</div>
		</div>
		<div class="tr">
			<div class="td">9</div>
			<div class="td">10</div>
			<div class="td">11</div>
			<div class="td">12</div>
		</div>
	</div>

</body>
</html>
Resumen de propiedades css para hacer tablas con display:table 1

¡Hola!

Querido lector,

El uso de tablas mediante propiedades css tiene muchos usos. Por ejemplo permite centrar un contenido verticalmente o crear lo que se denomina «sticky footer«.

También hay quién lo usa para maquetar, pues porejemplo permite lidiar con el conocido problema de que todas las columnas no tengan la misma altura. Aunque personalmente no es de mi devoción (quizás porqué la palabra table siempre me ha influido a ni siquiera testearla).

En cualquier caso no deja de ser un recurso más.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment