El atributo display tiene muchas posibles variantes para aplicar en elementos de la página. Muchos de nosotros nos limitamos a inline, block, none, etc. pero detrás hay mucho más. Cuando incluso ha llegado a nuestro alcance el maquetar con Flexbox todavía en DesarrolloWeb.com no os habíamos hablado del display: table.

Display table, junto con otra serie de valores de display que veremos a continuación, nos ofrecen la posibilidad de maquetar contenidos de manera que su comportamiento se parezca al de las tradicionales tablas del HTML (que hacíamos con la etiqueta TABLE, TD, etc.).

Sí, sabemos que no se debe maquetar con tablas desde hace muchos años, que <table> solo se debe usar para presentar información tabulada, pero lo que os vamos a contar es algo diferente. Seguirás usando tus DIV o mejor, tus SECTION, ARTICLE, etc., lo que te permitirá no perder la semántica de tu documento HTML. Sin embargo, con CSS asignaremos comportamiento visual a los elementos como si fueran celdas de nuestras tradicionales tablas.

Gracias a display table, puedes beneficiarte también de las posibilidades de maquetación de las tablas, pero respetando la semántica y con la flexibilidad que te otorga el CSS. Por ello sabes que alterando el CSS, podrás modificar cualquier distribución en la maquetación de tus elementos.

Table model en CSS (modelo de tabla)

Estamos hablando de una serie de características que fueron agregadas en CSS 2.1, por lo que su soporte en navegadores es total. No solo navegadores modernos, sino también navegadores más antiguos como Internet Explorer 8. Por tanto puedes usar todo lo que vas a encontrar en este artículo con total tranquilidad y seguridad de que funcionará en todos los navegadores que actualmente se usan.

Como decíamos, cuando colocas el display de CSS puedes usar diversos valores y el modelo de tabla nos ofrece diversas nuevas variantes que debes conocer. Algunas de ellas se usan bastante y otras son más residuales.

display: table

Permite asignar un comportamiento de tabla a los elementos que haya dentro (anidados a la etiqueta donde estás colocando el display: table). Teóricamente necesitas esa etiqueta para englobar dentro elementos que puedan tener comportamiento de tabla, pero realmente no es siempre absolutamente necesario. Es equivalente a la etiqueta TABLE tradicional del HTML.

Dentro de un elemento que hayamos marcado como display: table podrás usar otra serie de valores de display, que corresponden con los roles de distintas etiquetas HTML que usas en las tablas tradicionales.

display: table-row

Actúa como un elemento fila, es decir, como si fuera una etiqueta TR.

display: table-cell

Este valor se lo colocarías a las etiquetas que deben trabajar como una celda de tabla, etiqueta TD.

Esas son los atributos básicos del modelo de tabla CSS, que puedes usar para componer tus estructuras de formato tabla, pero existen muchos otros.

• table-caption: se comportan como la etiqueta CAPTION
• table-column: se comportan como la etiqueta COL
• table-column-group: se comportan como la etiqueta COLGROUP
• table-footer-group: se comportan como la etiqueta TFOOT
• table-header-group: comportamiento como la etiqueta THEAD
• table-row-group: comportamiento como la etiqueta TBODY

Además tenemos otro elemento que no tiene una correspondencia con ninguna de las etiquetas que conocemos en las tablas de siempre.

display: inline-table

Sería igual que un display: table con la diferencia que en este caso se comportaría como un elemento "inline". Osea, mientras que una tabla normal actúa como un bloque, con este elemento puedes hacer que se comporte como un elemento "inline".

Para qué sirve el display table

Existen diversas utilidades para este tipo de elementos, desde crear información que se muestre como una tabla, aunque utilicemos contenedores que no son realmente tablas, hasta la maquetación CSS aprovechando las características de las tablas.

Lo de presentar información tabulada, pero sin usar tablas te puede servir para maquetar pequeñas partes de una página, como por ejemplo una ficha de producto, donde no deseas usar TABLE para mantener la semántica del contenido.

La parte de maquetación con display: table te sirve para posicionar elementos dentro de tu "layout" con las posibilidades que te ofrecen las tablas y que hace tiempo no disfrutas desde que maquetar con tablas se volvió una de las mayores aberraciones en el mundo del diseño web. Sobre este punto veremos ejemplos y explicaciones en un futuro artículo.

Ejemplo de uso del display table, table-row y table-cell

Ahora vamos a ver unos ejemplos que nos puedan ilustrar mejor el uso de estos valores en el atributo display.

Vamos a comenzar con un ejemplo de información tabulada, pero sin usar TABLE. Podrías tener este HTML.

<div class="tablagen">
  <div class="fila">
    <div class="col">1.1</div>
    <div class="col">1.2</div>
    <div class="col">1.3</div>
    <div class="col">1.4</div>
  </div>
  <div class="fila">
    <div class="col">2.1</div>
    <div class="col">2.2</div>
    <div class="col">2.3</div>
  </div>
  <div class="fila">
    <div class="col">3.1</div>
    <div class="col">3.2</div>
  </div>
</div>

Verás que el comportamiento normal de estos elementos es que todo se escribe en vertical, unos elementos debajo de otros, debido al comportamiento display:block predeterminado de las cajas DIV.

Prueba a aplicarle luego los siguientes estilos CSS.

.tablagen{
  display: table;
}
.fila{
  display: table-row;
}
.col{
  display: table-cell;
  padding: 12px;
  background: #ddd;
}

Ahora verás que la disposición de tus elementos cambia radicalmente. Ahora se muestran de manera tabulada.

Veamos otro ejemplo que nos puede arrojar más luz todavía a estas posibilidades de las CSS. En este caso tenemos tres casillas y cada una con un texto. Queremos que se muestren una al lado de la otra y que tengan un espacio de separación entre medias.

<section>
    <article>Lorem ipsum ...</article>
    <article>Animi itaque ... </article>
    <article>Laborum repellat ... </article>
</section>

Ahora, para conseguir un espacio entre medias se puede probar el atributo de CSS border-spacing, que colocamos en la etiqueta general que engloba a los elementos que se comportan como tabla.

section {
  width: 100%;
  border-spacing: 5px;
}
article{
  display: table-cell;
  padding: 12px;
  background: #ddd;
  width: 33.33333%; 
  border: 4px solid #f86;
}

De momento eso es todo, puedes experimentar todas esas variantes que nos hemos dejado fuera para probar los otros elementos del modelo de tabla de CSS.