Resumen de propiedades css para hacer tablas con display:table

Resumen de propiedades css para hacer tablas con display:table

Print Friendly, PDF & Email
Resumen de propiedades css para hacer tablas con display:table
5 (100%) 2 votos

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>

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

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.