CREAR TABLAS RESPONSIVAS CON CSS GRID
Introducción a las tablas responsivas con CSS Grid
Las tablas HTML son una herramienta fundamental para mostrar colecciones de datos en aplicaciones web, pero su diseño tradicional presenta desafíos al adaptarse a diferentes tamaños de pantalla. En este tutorial, exploraremos cómo utilizar el CSS Grid Layout Module para crear tablas responsivas que se ajusten dinámicamente a dispositivos de escritorio y móviles sin necesidad de Javascript. Este enfoque mejora la experiencia del usuario al evitar el desplazamiento horizontal y optimiza la semántica del código. A continuación, detallaremos un método para transformar tablas HTML en listas ordenadas estilizadas con CSS Grid, logrando una presentación adaptable y eficiente.
Limitaciones de las tablas HTML tradicionales
Las tablas HTML, definidas con elementos como <tr> y <td>, son ideales para mostrar datos tabulares en pantallas grandes, pero su rigidez dificulta la adaptación a dispositivos móviles. En pantallas pequeñas, las tablas suelen requerir desplazamiento horizontal, lo que compromete la usabilidad. Soluciones tradicionales, como las propuestas en frameworks como Bootstrap, a menudo recurren al desplazamiento horizontal, pero esto no siempre es la mejor opción. Con la llegada de CSS Grid, es posible crear diseños más flexibles que reorganizan los datos según el ancho de la pantalla, mejorando la experiencia del usuario en todos los dispositivos.
Redefiniendo las tablas como colecciones de datos
Para superar las limitaciones de las tablas HTML, podemos redefinir los datos tabulares como una colección ordenada de ítems. En lugar de usar <table>, representaremos los datos con una lista ordenada (<ol>), donde cada ítem (<li>) contiene los atributos de un elemento, agrupados semánticamente con <div>. Esta estructura es más flexible y permite aplicar estilos dinámicos con CSS Grid. Por ejemplo, un conjunto de datos de órdenes de compra puede representarse así:
<section>
<ol>
<li class="item-container">
<div>#</div>
<div class="attribute-container part-id">
<div class="attribute" data-name="Número de parte">
Número de parte
</div>
<div class="attribute" data-name="Descripción">Descripción</div>
</div>
<div class="attribute-container vendor-info">
<div class="attribute" data-name="Proveedor">Proveedor</div>
<div class="attribute" data-name="Nombre proveedor">
Nombre proveedor
</div>
</div>
</li>
<li class="item-container">
<div>1</div>
<div class="attribute-container part-id">
<div class="attribute">100-10001</div>
<div class="attribute">Descripción del parte</div>
</div>
<div class="attribute-container vendor-info">
<div class="attribute">V001</div>
<div class="attribute">Proveedor A</div>
</div>
</li>
</ol>
</section>
En este ejemplo, el primer <li> representa el encabezado de la tabla, mientras que los siguientes contienen los datos. Los <div> con la clase attribute-container agrupan atributos relacionados, como información del producto o del proveedor, facilitando la aplicación de estilos responsivos.
Estilizando la tabla completa con CSS Grid
El objetivo inicial es mostrar los datos como una tabla tradicional en pantallas grandes, maximizando la visibilidad de los ítems. Para ello, convertimos cada <li> en un contenedor de cuadrícula con la clase .item-container. Definimos columnas explícitas usando grid-template-columns, asignando anchos relativos o absolutos según el contenido. Por ejemplo:
.item-container {
display: grid;
grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
}
Aquí, grid-template-columns define nueve columnas, correspondientes a los <div> de nivel superior dentro de cada <li>. Los anchos se ajustan con unidades relativas (fr) para las columnas que necesitan más espacio y unidades absolutas (em) para columnas con contenido predecible, como identificadores numéricos. Este enfoque garantiza que las columnas de la tabla se distribuyan de manera eficiente en pantallas anchas.
Envolviendo columnas para pantallas medianas
A medida que el ancho de la pantalla disminuye, algunas columnas deben envolverse verticalmente para ahorrar espacio horizontal. Para lograr esto, definimos contenedores de cuadrícula adicionales con la clase .attribute-container en los <div> intermedios que agrupan atributos relacionados. Usamos la función repeat(auto-fit, minmax()) para permitir que las columnas se envuelvan automáticamente:
.attribute-container {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(var(--column-width-min), 1fr)
);
}
La variable --column-width-min establece el ancho mínimo de cada columna dentro del contenedor. Por ejemplo, para la información del producto:
.part-id {
--column-width-min: 10em;
}
Si el contenedor es más estrecho que el ancho necesario para mostrar ambas columnas (por ejemplo, 20em para dos columnas de 10em), la segunda columna se envuelve a la siguiente fila. Esto permite que las tablas responsivas CSS se adapten dinámicamente, manteniendo la legibilidad sin necesidad de desplazamiento horizontal.
Anidando contenedores para mayor flexibilidad
Para manejar múltiples niveles de envoltorio, podemos anidar contenedores .attribute-container. Por ejemplo, un grupo de información del producto puede contener subgrupos para el número y la descripción del parte:
<div class="attribute-container part-information">
<div class="attribute-container part-id">
<div class="attribute" data-name="Número de parte">Número de parte</div>
<div class="attribute" data-name="Descripción">Descripción</div>
</div>
<div class="attribute-container vendor-information">
<div class="attribute" data-name="Proveedor">Proveedor</div>
<div class="attribute" data-name="Nombre proveedor">
Nombre proveedor
</div>
</div>
</div>
El CSS correspondiente sería:
.part-information {
--column-width-min: 10em;
}
.part-id {
--column-width-min: 10em;
}
.vendor-information {
--column-width-min: 8em;
}
Estas reglas se aplican dentro de una consulta de medios para pantallas medianas:
@media screen and (min-width: 737px) {
.part-information {
--column-width-min: 10em;
}
.part-id {
--column-width-min: 10em;
}
.vendor-information {
--column-width-min: 8em;
}
}
Este enfoque permite un envoltorio jerárquico, donde columnas menos críticas se apilan verticalmente, preservando el espacio horizontal para los atributos más importantes.
Transición al diseño de tarjetas en pantallas pequeñas
En dispositivos móviles, donde el ancho es limitado, las tablas tradicionales son poco prácticas. En su lugar, mostramos cada ítem como una tarjeta, con los nombres de los atributos en una columna y sus valores en otra. Para lograr esto, aplicamos la clase .attribute a los <div> finales y definimos una cuadrícula de dos columnas:
.attribute {
display: grid;
grid-template-columns: minmax(9em, 30%) 1fr;
}
Usamos un pseudo-elemento para mostrar el nombre del atributo, extraído del atributo personalizado data-name:
.attribute::before {
content: attr(data-name);
}
Ocultamos el primer <li> (encabezado) en el diseño de tarjetas, ya que los nombres de los atributos se muestran en cada tarjeta:
.collection-container > li:first-child {
display: none;
}
Para pantallas más anchas pero no suficientes para una tabla completa, usamos un diseño de dos columnas:
@media screen and (max-width: 736px) {
.collection-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
}
En pantallas muy estrechas, como en teléfonos móviles, cambiamos a una sola columna:
@media screen and (max-width: 580px) {
.collection-container {
display: grid;
grid-template-columns: 1fr;
}
}
Este diseño de tarjetas responsivas asegura que los datos sean legibles y accesibles en dispositivos pequeños sin comprometer la usabilidad.
Consideraciones de accesibilidad
Aunque este enfoque mejora la responsividad, la accesibilidad requiere atención adicional. Las listas ordenadas son semánticamente correctas para colecciones de datos, pero debemos asegurarnos de que los lectores de pantalla interpreten correctamente la estructura. Agregar atributos ARIA, como role="grid" para la lista y role="row" para cada <li>, puede mejorar la compatibilidad. Además, los nombres de atributos generados con pseudo-elementos (::before) no son accesibles para lectores de pantalla, por lo que podríamos incluirlos explícitamente en el HTML para mayor compatibilidad:
<div class="attribute">
<span class="attribute-name">Número de parte</span>
<span class="attribute-value">100-10001</span>
</div>
Actualizamos el CSS para usar estas clases:
.attribute {
display: grid;
grid-template-columns: minmax(9em, 30%) 1fr;
}
.attribute-name {
grid-column: 1;
}
.attribute-value {
grid-column: 2;
}
Esto asegura que los lectores de pantalla puedan interpretar los nombres y valores de los atributos correctamente.
Ventajas de usar CSS Grid para tablas responsivas
El uso de CSS Grid ofrece varias ventajas sobre otras soluciones, como Flexbox o tablas HTML tradicionales. Primero, permite un control preciso sobre el diseño bidimensional, facilitando el envoltorio de columnas y la transición a diseños de tarjetas. Segundo, elimina la necesidad de Javascript, reduciendo la complejidad del código y mejorando el rendimiento. Finalmente, la estructura basada en listas ordenadas es más semántica que las tablas HTML tradicionales, lo que mejora la mantenibilidad y la compatibilidad con tecnologías de asistencia.
Ejemplo completo de implementación
A continuación, presentamos un ejemplo completo que combina HTML y CSS para una tabla responsiva de órdenes de compra:
<section class="collection-container">
<ol>
<li class="item-container">
<div>#</div>
<div class="attribute-container part-id">
<div class="attribute" data-name="Número de parte">
Número de parte
</div>
<div class="attribute" data-name="Descripción">Descripción</div>
</div>
<div class="attribute-container vendor-info">
<div class="attribute" data-name="Proveedor">Proveedor</div>
<div class="attribute" data-name="Nombre proveedor">
Nombre proveedor
</div>
</div>
</li>
<li class="item-container">
<div>1</div>
<div class="attribute-container part-id">
<div class="attribute">100-10001</div>
<div class="attribute">Tornillo de acero</div>
</div>
<div class="attribute-container vendor-info">
<div class="attribute">V001</div>
<div class="attribute">Proveedor A</div>
</div>
</li>
</ol>
</section>
.item-container {
display: grid;
grid-template-columns: 2em 2em 10fr 2fr 2fr;
}
.attribute-container {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(var(--column-width-min), 1fr)
);
}
.part-id {
--column-width-min: 10em;
}
.vendor-info {
--column-width-min: 8em;
}
@media screen and (min-width: 737px) {
.part-id {
--column-width-min: 10em;
}
.vendor-info {
--column-width-min: 8em;
}
}
@media screen and (max-width: 736px) {
.collection-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.attribute {
display: grid;
grid-template-columns: minmax(9em, 30%) 1fr;
}
.attribute::before {
content: attr(data-name);
}
.collection-container > li:first-child {
display: none;
}
}
@media screen and (max-width: 580px) {
.collection-container {
display: grid;
grid-template-columns: 1fr;
}
}
Este código crea una tabla que se muestra completamente en pantallas grandes, envuelve columnas en pantallas medianas y se transforma en tarjetas en pantallas pequeñas.
Conclusiones
El uso de CSS Grid para crear tablas responsivas ofrece una solución moderna y eficiente para mostrar datos tabulares en aplicaciones web. Al redefinir las tablas como colecciones de ítems y estilizarlas con cuadrículas, podemos lograr diseños que se adaptan dinámicamente a diferentes dispositivos sin comprometer la usabilidad ni la semántica. Este enfoque elimina la dependencia de Javascript y mejora la accesibilidad al usar estructuras HTML más flexibles. Aunque requiere ajustes para garantizar la compatibilidad con lectores de pantalla, CSS Grid proporciona un marco robusto para desarrollar interfaces de datos modernas y responsivas, ideales para sitios web de programación y tecnología.
