soy Kseso y esto EsCSS

Tablas Css. Display: table y asociadas. Su oportunidad en el responsive design

Un vistazo a las "tablas Css" (propiedad display:table y asociadas). Sus diferencias con las tablas html y sus posibilidades en el responsive design.

Tablas Css. Display: table y asociadas. Su oportunidad en el responsive design

·Por Kseso ✎ 6

Tablas Css. Display: table y asociadas en el momento actual del responsive designSí. Es cierto. Hablar de tablas Css puede ser peligroso. Según quien, es poco menos que un tema tabú. Serán muchas las veces que oigas/leas que si necesitas presentar datos tabulados uses el elemento table. Y de utilizar tablas para crear el layout... ¡uf! Ni mencionarlo siquiera.

Sin embargo, existir existen. Y si existen lo mejor es intentar conocer sus particularidades y evaluar si se pueden usar o no. Y de usarlas, cuándo, cómo y para qué.

Así que vamos con un vistazo a las tablas Css, comparándolas con el elemento table de Html y algún ejemplo de uso.

Estructura de la tabla Css

Display table y asociados

El modelo de tabla Css se basa en el modelo de tabla de Html4, y la presentación y ordenamiento visual es la misma en ambos casos.
En Css las tablas se obtienen a través de la propiedad display y sus valores correspondientes para hacer de un elemento su equivalente en la tabla html. Estos son:

table { display: table /*inline-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 }

La única diferencia entre los valores Table | inline-table es que el segundo crea un tabla en línea (inline) con otros elementos y el primero crea un bloque (block).

Y caption puede colocarse antes o después de la tabla (arriba o abajo) también con css:

#caption {caption-side: top} #caption {caption-side: bottom}

En cuanto al soporte por los navegadores, en 2013 no debería preocuparte en exceso y sólo en muy contadas ocasiones

Marcado de la tabla Css

A diferencia de lo que ocurre con las tablas Html, las "creadas" vía Css no necesitan declarar obligatoriamente la tabla, las filas y las celdas. Si a un elemento le defines sólo display: table se generan bloques de contención anónimos que suplen los intermedios y obviados.

El típico ejemplo es el usado, yo también, para centrar elementos de tamaño desconocido a priori, como las imágenes. El porqué en el siguiente apartado.

imagen centrada con display table .centro { display: table; margin: 0 auto; }

Tampoco es obligatorio, si no se necesita, declarar un elemento interpuesto como table-row entre el padre table y su descendiente table-cell (se generan las cajas anónimas oportunas).

Algorritmo en tablas: propiedad table-layout

La anchura de una tabla depende de qué método (algorritmo) se establezca mediante la propiedad table-layout. Admite, además del valor inherit dos más:

fixed
La anchura no la define su contenido, viene dada por declarada en la tabla, las celdas, bordes y/o espaciado entre celdas (cell spacing).
auto
Es el valor por defecto o inicial. La anchura de la tabla la marca la anchura de las columnas y los bordes.

La diferencia más notable entre un valor y otro, es que si usas auto corres el riesgo que la anchura de las celdas se modifique en función del contenido, obviando incluso la anchura declarada para las celdas. Lo que puede llevar a recalcular la anchura de las celdas y su reacomodo.

Y en algunos navegadores como FF, si olvidas declarar table-layout: fixed verás que no surte efecto declarar anchura en la celda. Anula la declaración en .layout

Check out this Pen!

Esta es la explicación del porqué se centra la imagen anterior. El tamaño computado de la tabla creada no es el 100% del que tiene disponible aunque sea un elemento de bloque y fuerze un salto de línea. Su display≠block). Este comportamiento de permitir o no otros elementos en su línea lo controla el par de valores posibles table | inline-table.

Usar o no tablas Css

Diferencias y semejanzas entre unas tablas y otras

  • Pese a que el marcado de la tabla Html sea más prolijo que el de las tablas Css, éste también lo es.
  • Ambas estructuras son rígidas. Su orden de presentación depende de su orden de aparición en el html. Y el querer alterarlo requiere de sobreesfuerzo y declaraciones añadidas en el css. Por ejemplo para dejar el thead fijo al hacer scroll no siempre fácil o intuitivo.
  • El renderizado de una tabla html le supone al navegador varias pasadas (reflow) en la mayoría de ocasiones. Con las Css no se requieren.

Cuándo y para qué usar una u otra tabla

Sin entrar en razones o argumentar los porqués, hoy en día debería estar más que claro que:

  • Tablas HTML: Si necesitas presentar datos tabulados (en el más amplio sentido de la expresión) nunca deberías complicarte creando tablas Css.
  • Tabla Css: si quieres aprovecharte de algunas de las propiedades/comportamiento de las tablas en algún elemento(s) usa display: table. Y nunca una tabla Html para crear el layout o tramoya de la página.
    Algunos ejemplos de realizaciones que se vuelven sencillas al usar el valor table y asociados además de los centrados:
    • Falsas columnas de igual altura
    • Pie abajo o Sticky Footer
    • Cuerpo al 100% de la ventana con encabezado y pie de página.

Display: table en el RWD. Mucha cancha y juego

Con el advenimiento del RWD, las @media-queries y su explosión, las "tablas Css" han visto cómo se recuperan o redescubren. El display:table ha pasado de ser ignorado por los problemas del navegador de siempre a ser tomado en cuenta para crear el layout, estructura o tramoya de las páginas.

Layouts con display: table

Son muchos los artículos y realizaciones RWD basados en el uso de las tablas Css. Posíblemente ya los conozcas. Si no fuese así, unos pocos enlaces para que te inicies:

  1. Un framework con dos líneas de Css
  2. display:table-cell y su oportunidad en el Responsive Design
  3. Un ejemplo
  4. Otro ejemplo

Alternativas, enlaces complementarios

Como todo esto de las tablas, ya sean Html o emulaciones vía Css con display:table son cosas con mucho tiempo a sus espaldas, no te sorprendo si te digo que hay propuestas más o menos viables a estas alturas para lograr un mayor control de la presentación de la información.

DY si quieres ampliar información sobre el tema de las tablas Css, algún enlace que puedes consultar

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso