Volver al artículo: Responsive Web Design (diseño web adaptativo)
Los datos presentados en forma de tabla suponen un verdadero reto para el diseño responsive. Hay diversos enfoques, algunos basados en CSS3 y otros que además utilizan JavaScript. Veamos algunos métodos que utilizan únicamente CSS3:
Fuente: elvery.net - Responsive Tables Demo
En este sistema se muestran más o menos columnas según el ancho de la pantalla (vía irishstu.com - Tables Responsive Design).
Hidden columns: Company | Change | High | Low
Code | Company | Price | Change | Change % | Open | High | Low | Volume |
---|---|---|---|---|---|---|---|---|
AAC | AUSTRALIAN COMPANY LIMITED. | $1.38 | -0.01 | -0.36% | $1.39 | $1.39 | $1.38 | 9,395 |
AAD | ARDENT LEISURE GROUP | $1.15 | +0.02 | 1.32% | $1.14 | $1.15 | $1.13 | 56,431 |
AAX | AUSENCO LIMITED | $4.00 | -0.04 | -0.99% | $4.01 | $4.05 | $4.00 | 90,641 |
ABC | ADELAIDE BRIGHTON LIMITED | $3.00 | +0.06 | 2.04% | $2.98 | $3.00 | $2.96 | 862,518 |
En esta técnica se trasponen filas y columnas y se aplica un scroll a los datos (vía dbushell.com - Responsive Tables).
Code | Company | Price | Change | Change % | Open | High | Low | Volume |
---|---|---|---|---|---|---|---|---|
AAC | AUSTRALIAN COMPANY LIMITED. | $1.38 | -0.01 | -0.36% | $1.39 | $1.39 | $1.38 | 9,395 |
AAD | ARDENT LEISURE GROUP | $1.15 | +0.02 | 1.32% | $1.14 | $1.15 | $1.13 | 56,431 |
AAX | AUSENCO LIMITED | $4.00 | -0.04 | -0.99% | $4.01 | $4.05 | $4.00 | 90,641 |
ABC | ADELAIDE BRIGHTON LIMITED | $3.00 | +0.06 | 2.04% | $2.98 | $3.00 | $2.96 | 862,518 |
La tabla se convierte en una tabla de 2 columnas donde se muestra cada registro individualmente.
Veamos un ejemplo de tabla de 2 columnas desarrollado con un enfoque Graceful Degradation (degradación agraciada), en el que la versión por defecto del sitio se desarrolla para PCs y luego se modifica para teléfonos móviles (vía css-tricks.com - Responsive Data Tables).
Code | Company | Price | Change | Change % | Open | High | Low | Volume |
---|---|---|---|---|---|---|---|---|
AAC | AUSTRALIAN COMPANY LIMITED. | $1.38 | -0.01 | -0.36% | $1.39 | $1.39 | $1.38 | 9,395 |
AAD | ARDENT LEISURE GROUP | $1.15 | +0.02 | 1.32% | $1.14 | $1.15 | $1.13 | 56,431 |
AAX | AUSENCO LIMITED | $4.00 | -0.04 | -0.99% | $4.01 | $4.05 | $4.00 | 90,641 |
ABC | ADELAIDE BRIGHTON LIMITED | $3.00 | +0.06 | 2.04% | $2.98 | $3.00 | $2.96 | 862,518 |
Veamos otro ejemplo donde la tabla se convierte en una tabla de 2 columnas donde se muestra cada registro individualmente, en este caso desarrollado con un enfoque Mobile First o Progressive Enhancement (mejora progesiva), donde la versión por defecto del sitio se desarrolla para teléfonos móviles y luego se añaden prestaciones en la versión para PCs (vía jsbin.com - Mobile First Responsive Faux Table).
Veamos un ejemplo de tabla estructurada con elementos <div> que se convierte en una tabla de 1 columna donde se muestra cada registro individualmente (vía mobifreaks.com - Responsive and SEO Friendly Data Tables).
La tabla abandona la estructura de rejilla y las celdas de datos se concatenan entre sí, sin dejar de ser una fila. En lugar de identificarse los datos por la columna en que se encuentran, se codifican por colores (vía hawidu.com - Another Responsive Data Tables Approach).
Column 1 | Number | Text | Unbroken Text | Column 5 |
---|---|---|---|---|
Row | 123456789 | This is some text | This-is-more-text-without-whitespace-characters | And more text |
Row | 123456789 | This is some text | This-is-more-text-without-whitespace-characters | And more text |
Row | 123456789 | This is some text | This-is-more-text-without-whitespace-characters | And more text |
Row | 123456789 | This is some text | This-is-more-text-without-whitespace-characters | And more text |
Volver al artículo: Responsive Web Design (diseño web adaptativo)