display: table – CSS | Características y Funcionamiento

Esta propiedad CSS es realmente interesante a la hora de estructurar los elementos que se visualizan en nuestra pantalla.

Se podría decir que es similar a la etiqueta de HTML table, pero usando en su lugar contenedores (div) y estilos CSS.

Para verlo de forma clara vamos a ver dos ejemplos de diseño de tablas, uno realizado con la propiedad CSS display:table y otro con la etiqueta table de HTML.

¿Como se debe utilizar la propiedad display: table?

Para entender su funcionamiento vamos a poner un ejemplo de la estructura de la etiqueta table y después un ejemplo sobre nuestra estructura usando la propiedad CSS display: table.

La etiqueta table de HTML usa:

<table>
  <tr>
    <td>Contenido</td>
  </tr>
</table>

Vemos que para la etiqueta table hemos utilizado además la etiqueta tr (filas) y la etiqueta td (columnas).

Ahora vamos a nuestra estructura usando la propiedad CSS display: table.

Vamos a utilizar para crear la estructura de una tabla los siguientes estilos:

  • display: table
  • display: table-row
  • display: table-cell

A estas alturas ya debemos de ver algunas similitudes y podemos deducir que:
-El estilo display:table es similar a la etiqueta table.
-El estilo display:table-row es similar a la etiqueta tr.
-El estilo display:table-cell es similar a la etiqueta td.

En nuestro archivo HTML:

<div class="tabla">
  <div class="tablaRow">
    <div class="bloqueTablaCell">Contenido</div>
  </div>
</div>

Aquí os dejo la tabla completa de equivalencia entre la etiqueta HTML table y la propiedad CSS table:

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

En nuestra hoja de estilos le asignaremos las propiedades CSS correspondientes a nuestras clases que incorporarmos en nuestro código HTML:

.tabla {
  display:table;
}
 
.tablaRow {
  display:table-row;
}
 
.bloqueTablaCell {
  display:table-cell;
}

¿Como le añadimos un borde, espacios, fondo a nuestra tabla «ficticia»?

De forma fácil, unicamente le deberemos poner los estilos que queramos darle a los contenedores, me imagino que muchos que usan la propiedad display: table querrán dar un aspecto similar a una tabla, para ello se aplicarán los siguientes estilos sobre la clase que contiene la propiedad display: table-cell:

.bloqueTablaCell {
  display:table-cell;
  background: #F5F5F5;
  border: 1px solid #6B92C3;
}

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

Deja un comentario

Tu dirección de correo electrónico no será publicada.