Tablas: lista de lecturas y demos 3.3.17
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
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.
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
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.
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
Kseso
the obCSServer ᛯ 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 Kseso