Volver al artículo: Responsive Web Design (diseño web adaptativo)

Demo tablas responsive

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:

  1. Mostrar/ocultar columnas: se muestran más o menos columnas según el ancho de la pantalla.
  2. Tabla con scroll: se trasponen filas y columnas y se aplica un scroll a los datos.
  3. Tabla de 2 columnas: la tabla se convierte en una tabla de 2 columnas donde se muestra cada registro individualmente.
  4. Tabla de 1 columna: la tabla se convierte en una tabla de 1 columna donde se muestra cada registro individualmente.
  5. Tabla con filas inline: la tabla abandona la estructura de rejilla y las celdas de datos se concatenan entre sí, sin dejar de ser una fila.

Fuente: elvery.net - Responsive Tables Demo

1. Mostrar/ocultar columnas

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

2. Tabla con scroll

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

3. Tabla de 2 columnas

La tabla se convierte en una tabla de 2 columnas donde se muestra cada registro individualmente.

3.1 Tabla de 2 columnas, enfoque Graceful Degradation

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

3.2 Tabla de 2 columnas, enfoque Mobile First

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).

First Name
James
Last Name
Matman
Job Title
Chief Sandwich Eater
Favorite Color
Lettuce Green
Wars or Trek?
Trek
Nick Name
Digby Green
Date of Birth
January 13, 1979
Dream Vacation City
Gotham City
GPA
3.1
Arbitrary Data
RBX-12
First Name
James
Last Name
Matman
Job Title
Chief Sandwich Eater
Favorite Color
Lettuce Green
Wars or Trek?
Trek
Nick Name
Digby Green
Date of Birth
January 13, 1979
Dream Vacation City
Gotham City
GPA
3.1
Arbitrary Data
RBX-12
First Name
The
Last Name
Tick
Job Title
Crimefighter Sorta
Favorite Color
Blue
Wars or Trek?
Wars
Nick Name
John Smith
Date of Birth
July 19, 1968
Dream Vacation City
Athens
GPA
N/A
Arbitrary Data
Edlund, Ben (July 1996).
First Name
Jokey
Last Name
Smurf
Job Title
Giving Exploding Presents
Favorite Color
Smurflow
Wars or Trek?
Smurf
Nick Name
Smurflane Smurfmutt
Date of Birth
Smurfuary Smurfteenth, 1945
Dream Vacation City
New Smurf City
GPA
4.Smurf
Arbitrary Data
One
First Name
Cindy
Last Name
Beyler
Job Title
Sales Representative
Favorite Color
Red
Wars or Trek?
Wars
Nick Name
Lori Quivey
Date of Birth
July 5, 1956
Dream Vacation City
Paris
GPA
3.4
Arbitrary Data
3451

4. Tabla de 1 columna, estructura con div

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).

Employee No
User Name
Real Name
Age
Profession
Contact
2311
Lorem
Ipsum dolor
22
Web designer
1234567890
4542
Viverra
Nam non viverra
22
Web developer
2345678901
5643
Sed
Donec sed volutpat
25
Editor
3456789012
5464
Orci
Phasellus eu orci nunc
32
User Interface
4567890123

5. Tabla con filas inline

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 1NumberTextUnbroken TextColumn 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)