Posts Tagged ‘la maquetacion del futuro’

Maquetando sin tablas, pero como con tablas: display inline block

Monday, October 27th, 2008

Aviso: lo que se explica en el siguiente artículo forma parte de lo que denomino “la maquetación web del futuro“, es decir, cosas que podremos hacer dentro de un tiempo pero que, dado el uso que aún tienen algunos navegadores antigüos, hoy por hoy no es recomedandable utilizar

Actualización!: Anieto2k publica un hack que permitiría utilizar esta técnica en todos los navegadores. 

Esta semana he leído dos artículos (artículo 1, artículo 2) donde unidos a la palabra maquetación se usan términos como “Table”, “Cell” o “Row”. ¿Qué pasa? ¿Se ha vuelto a poner de moda la maquetación basada en tablas? Evidentemente no, esto no tiene vuelta atrás aunque todavía haya demasiados sitios webs table based.

La idea central de estos artículos es la posibilidad de poder aplicar a elementos que no son tablas propiedades de éstas. Esto se hace mediante los valores “table”, “table-cell” y “table-row” de la propiedad display. Se vuelve a hablar de esto ahora que Internet Explorer 8 admite y funciona con estos valores, aunque no lo hace de forma totalmente correcta (hablamos de la beta 2).

En la práctica lo que esto supone es que podemos hacer un elemento HMTL como, por ejemplo, un DIV, tenga el comportamiento de una tabla. Es decir, sin hacer atentados semánticos podemos aprovechar las propiedades de la maquetación con tablas. Un claro caso de uso es poder hacer algo que trae de cabeza a cualquier maquetador CSS: que un conjunto de elementos flotantes tengan una altura común. Dos imágenes valen más que 2.000 palabras

Caso 1: (ver html)

Caso 2: (ver html no en Internet Explorer < 8)

Para el segundo caso lo que hemos hecho es usar en los siguientes valores de la propiedad display:

  • display: table->le dice al elemento que se comporte como una tabla.
  • display: table-row-> le dice al elemento que se comporte como una fila de una tabla
  • display: table-cell->  le dice al elemento que se comporte como una celda de una tabla

Ojo, por si no has leido atentamente: esta técnica se podrá usar cuando la gente

Más sobre este tema: