Modelo de tabla CSS con la propiedad display

  • Por
Posibilidades del modelo de tabla en CSS con display table, table-row, table-cell y muchas otras. Explicaciones y ejemplos.

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. para no perder la semántica de tu documento HTML, pero con CSS asignaremos comportamiento visual a los elementos como si fueran celdas de nuestras tradicionales tablas. De este modo puedes beneficiarte también de las posibilidades de maquetación de las tablas, pero respetando la semántica y con a flexibilidad de 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, 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".

Nota: Para aclarar las cosas, los elementos P, DIV, ARTICLE… actuan como block (cuando se posicionan en el flujo del documento no tienen elementos a su lado) y etiquetas como SPAN, A, B… actúan como inline (cuando se colocan en el documento tienen en cuenta los elementos que hay a su lado, situándose sin provocar saltos de línea). Aunque sabes que con CSS puedes cambiar el comportamiento predeterminado de cualquier etiqueta.

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.

Nota: Si experimentas, observarás que los elementos con display table-cell no te aceptan la propiedad margin. Esto es porque los elementos de una tabla en general no lo admiten, en lugar de eso recuerda que tenemos que indicar en la tabla el espacio entre las casillas. En TABLE tradicional usábamos el cellspacing.
<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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Robherto

26/9/2014
Sugerencia
Que tal Miguel.
Muy interesante el artículo (este y otros más que ya he leido) pero, si me permites un comentario, estaría mejor si en los siguientes tutoriales acompañaras los códigos con la respectiva salida (donde sea posible) para ver el efecto inmediato que se produce.

Muy en lo particular el resultado genera una mayor espectativa para los lectores como tu servidor.

Muy buen contenido, felicidades!

midesweb

26/9/2014
Ejemplo en funcionamiento
Hola!
Tienes toda la razón. Desde hace tiempo no incluyo los modelos en funcionamiento en la web, pero estoy pensando en cómo hacerlo. Los tengo subidos a Codepen y los pensaba enlazar con el sitio de Codepen para que se viesen allí en vivo y se puedan editar incluso si se desean.
Vamos poco a poco, porque el día a día nos tiene saturados.

Hernan

27/9/2014
Interesante
Con el tema del responsive tuve que volver a trabajar con el concepto de tablas, la cual no tengo muchos conocimientos, por eso es un buen articulo y espero que sigan publicando sobre los diferentes modelos de cajas.

Héctor Polanco

30/9/2014
Muy Educativo
Interesante! Esto soluciona muchos de los mínimos detalles...

Fernando

23/10/2014
tablas en CSS
Muy interesando el artículo.
¿Cómo pondrías un rowspan o colspan?
Un abrazo