soy Kseso y esto EsCSS

Tablas: lista de lecturas y demos

Recopilación de artículos y demostraciones centrados en el elemento HTML table y el CSS asociado a las tablas publicados a lo largo del tiempo en este blog.

Tablas: lista de lecturas y demos

Por Kseso ✎ 0
Tablas. lista de lecturas y demos

A lo largo de estos años en este blog he ido publicando una serie de artículos y demostraciones relativos al elemento table.

Y lejos de haber ido decreciendo el interés y uso del elemento table con el paso del tiempo lo que ha ocurrido es todo lo contrario.

Hubo un tiempo que las tablas eran denostadas y muchos les colocaron la escarapela de elemento apestado y apestoso que mejor no usar, casi ni para presentar lo que les corresponde: información agrupada en filas y columnas.

Por suerte ese movimiento además de durar poco fue bastante minoritario (en términos relativos) y hoy por hoy la consulta a los artículos del blog que versan sobre las tablas son más que significativos.

Así que a continuación esta pequeña y no exhaustiva lista de lectura de artículos y demostraciones sobre las tablas de esos posts.

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

Sí. 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.

Display: table & responsive design

Regreso a lo básico: tablas con scroll y encabezado fijo en puro Css

Esta es una cuestión resuelta hace mucho, mucho tiempo. Sin embargo no está de más recuperar de vez en cuando realizaciones veteranas y plénamente funcionales para quienes se incorporan.

Así que aquí van unos ejemplos de tablas con el encabezado fijo (siempre visible) al hacer scroll en el cuerpo (tbody) de la tabla.

Tablas con scroll y encabezado fijo

Tables & Responsive Times: scroll en Tbody y Thead fixed puro Css

A diferencia del artículo anterior este hace uso de "novedades" CSS para lograr lo mismo, encabezado fijo y scroll en el cuerpo de la tabla que contiene los datos, con el añadido de un comportamiento responsive de la tabla en función del tamaño del viewport.

Incluye varias demos.

Tables & Responsive Times

Tablas con encabezado fijo de filas, 1ª columna fija y desplazamiento por datos

Furoya explica cómo manejar tablas de gran contenido con algo de javascrip, con encabezado fijo de filas, la 1ª columna fixed y desplazamiento según los datos.

La diferencia con otros métodos que hayas visto está en la forma de mover las celdas, porque ya no vamos a usar una scrollbar convencional, y el desplazamiento será por contenido y no por tamaño.

Tablas con encabezado fijo de filas, 1ª columna fija y desplazamiento por datos

Sticky Header en tablas puro Css con position: sticky

Ejemplo de funcionamiento de la declaración de Position: sticky aplicado a una tabla, en la que interesa que el encabezado thead se mantenga visible mientras se hace scroll en ella.

En la actualidad, para lograr este efecto, es necesario recurrir a algún tipo de programación como javascript. De hecho, hay múltiples extensiones para muchas librerías como jQuery, Prototype, MooTools, Dojo... Suelen conocerse como "Sticky Header" o "Encabezados Persistentes".

Sticky Header en tablas puro Css con position: sticky

Creación de tablas con movimiento de contenido entre celdas.
Caso de estudio: Tablero de Ajedrez

colaboración de Furoya en torno a javascript. En esta ocasión parte de la creación de una tabla convertida en tablero de ajedrez y va añadiendo funcionalidades, desde las fichas, a cambiar su posición y efectos asociados al movimiento.

Tablas con movimiento de contenido entre celdas

From table to tabs pure Css

from table to tabs
De tabla a pestañas pure CSS

En muchas ocasiones se construyen tablas Html (table) con otros elementos en base a cambiar el valor de la propiedad display: table y sus asociados. Mala práctica, pero bueno.

Otras veces lo que se busca es aprovechar alguna de las particularidades de las tablas trasladándolas a elementos de bloque.

Pero lo que nunca he visto ha sido transformar las tablas, vía Css, en otro tipo de elementos. Así que me pregunté si sería posible a partir de una tabla, supongamos que ya existente, transformarla en digamos un sistema de tabs o navegación por pestañas sin tener que tocar su marcado Html.

From table to tabs pure Css

Permutar el orden de elementos con display: table y asociadas

Cambiar el orden de visualización en pantalla respecto a su aparición en el DOM se puede hacer con la propiedad Css 'order' del flexbox. Pero es más divertido usar la imaginación y display: table y asociadas.

Algunos elementos de las tablas, como el título (caption o table-caption) así como el encabezado o el pie son susceptibles de mostrarse en pantalla en un lugar diferente al que ocupan en el documento.

Así que aprovechando este detalle, una demo sobre cómo hacerlo cambiando el display de algunos elementos al valor table y sus asociados.

Permutar el orden de elementos con display: table

Filtrar filas de una tabla por palabra clave contenida en sus celdas

Continuación del artículo de Furoya sobre cómo detectar, con javascript puro, si en el contenido de un elemento hay o no una palabra clave y en función de ello actuar.

En esta entrega se aplica para filtrar el contenido de una tabla ocultando o mostrando filas en función de que exista cierto dato en alguna de sus celdas.

Filtrar filas de tabla por palabra clave

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

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap