Come gestire le tabelle nel responsive web design?

tabelle-responsive
Tempo stimato di lettura: 4 minuti, 13 secondi
Pubblicato il 7 maggio 2015

Le tabelle html sono dei modelli che permettono di gestire dati ( testi, immagini, numeri, ecc) all’interno di celle di righe e colonne.
Proprio per la loro struttura e la grande quantità di dati contenuti in esse, sono difficilmente gestibili, in particolare in un sito web responsive.
Nelle versioni desktop le tabelle si estendono orizzontalmente potendo contare su uno spazio largo. Ma come facciamo nel momento in cui lo spazio si restringe fino ad arrivare ad una risoluzione di 320px ( portrait ), tipica degli smartphone?

Responsive web design e tabelle html

Ecco quindi alcune soluzioni che permettono di adattare meglio il contenuto dei dati delle tabelle nel responsive web design.

Le parti della tabella sono le seguenti:

  • TABLE è il tag della tabella;
  • THEAD sta ad indicare l’intestazione della Tabella;
  • TR è la riga per cui THEAD TR distingue la riga dell’intestazione;
  • TH è la cella della riga THEAD TR;
  • TBODY è il corpo centrale della tabella cioè i dati della tabella;
  • TBODY TR sono le righe che formano il corpo;
  • TD sono le celle del corpo tabella TBODY TR;

Ho realizzato questa tabella con una lista di utenti che contiene 6 colonne e 4 righe con questo risultato:

tabella1

Il problema principale è fare in modo che questa tabella sia visualizzata bene nei dispositivi più piccoli. Per esempio su uno smartphone di 320px ( iphone – portrait ) viene visualizzata così:

iphone

La tabella è tagliata nel viewport di 320px e compaiono le barre orizzontali e verticali, necessarie per poterla visualizzare interamente. Ma non solo su questo dispositivo. Prova a restringere il browser e noterai che fino a 768px la tabella viene visualizzata correttamente.

Il viewport non riesce più a visualizzare l’intera tabella con le sue righe e colonne per intero.

Lo spazio in questi dispositivi comincia ad estendersi verticalmente, e così anche la tabella deve essere implementata tenendo conto di questo elemento.

Come rendere una tabella html responsive

In primo luogo dobbiamo aggiungere il tag viewport nella struttura del sito.

Dopodiché dobbiamo creare la nostra media query e comunicare al browser che a partire da 320px e fino a 767px ( punto in cui la tabella non si vede più bene ) la tabella viene forzata con una serie di righe larghe quanto il viewport.

All’interno di questa media query inseriamo lo stile della nuova tabella responsive per fare in modo che possa essere visualizzata correttamente. Ecco come:

#1 – Forza la tabella

#2 – Togli il bordo alle righe

In questo modo vengono isolate le righe di ogni utente e si possono distinguere una riga dall’altra:

 #3 – Nascondi l’intestazione

Se si lasciasse l’intestazione della tabella non responsive, non sarebbe comprensibile quale corrisponda ad ogni riga del corpo tabella. Per cui successivamente bisogna usare lo stratagemma del selettore per creare un’altra cella all’interno della riga della tabella.

 #4 – Sposta la cella dei dati

Con il padding di sinistra del 50% vanno create le condizioni per inserire l’intestazione a sinistra della riga:

#4 – Crea l’altra cella per l’intestazione

#5 – Inserisci l’etichetta per ogni dato

Grazie al selettore nth-of-type di ogni riga si può inserire l’intestazione nell’elemento content che è una proprietà usata con i pseudo elementi :before e :after per generare un contenuto extra.

Ecco il risultato su smartphone!

iphone2

Un altro passo avanti per le risoluzioni più piccole

La tabella adesso viene visualizzata correttamente distinguendo ogni riga dall’altra con un colore diverso e associando ogni intestazione ad un dato.

Un ulteriore passo avanti è quello di far si che nella risoluzione più piccola per esempio da 320px a 480px ogni riga sia visualizzata al 100% dello schermo. Come si può fare?

In primo luogo va modificata la prima media query da:

a:

Poi inserita una nuova media query:

A partire dalla risoluzione di 320px fino ad una massima risoluzione di 480px vanno inserite ulteriori modifiche allo stile per fare in modo che i dati e le intestazioni sono larghi pari al 100% del viewport.

#1 – Modifica la riga dato

La riga non viene più lasciata a destra con un padding del 50% ma in questo modo:

#2 – L’intestazione pari al 100%

Con una larghezza pari al 100% e posizionando a 0 sia in orizzontale che verticale:

Ecco il risultato per le risoluzioni più piccole:

iphone3

Le combinazioni delle tabelle sono numerosissime, ci sono tabelle veramente complesse che necessitano addirittura un plugin esterno.

Anche con jQuery è possibile gestire tante soluzioni che utilizzano dei metodi in grado di modificare la tabella non responsive per renderla tale.

Molto interessante è il metodo utilizzato invece da Zurb, che non modifica lo stile della tabella, ma utilizza un metodo di scorrimento che non la altera nel suo stile iniziale. La tabella nelle versioni più piccole rimane intatta. Nella colonna dei dati però inserisce  al mouse hover una barra grigia che permette di scrollare orizzontalmente i dati.

Conosci altri plugin o altri metodi efficaci per gestire le tabelle nel responsive design? Diccelo nei commenti!

Ecco la nostra demo:

Vedi la DEMO
Scarica lo zip

  • è importante capire quanto ormai il css3 e le nuove pseudoclassi abbiano ‘aggredito’ le sintassi e siano diventate quindi di uso comune, così come l’utilizzo del foglio di stile responsivizzato con le media query. con l’html5 possiamo comunque sbarazzarci definitivamente della classica formattazione delle tabelle che abbiamo sempre usato, per adottare una sintassi più pulita e più adattabile (utilizzando i div associati a classi anzichè i vari tr e td), affidata alla collaborazione col css con le classi per righe e colonne, singolarmente responsivizzate ognuna con una media query. complimenti per l’articolo cara Alessandra, per un argomento un po’ ostico ma davvero ben spiegato!

  • Gianmaria Delfino

    Ciao Alessandra e complimenti per l’articolo. mi chiedevo se questi comandi possono essere utili anche quando si crea un epub. Io ho sempre problemi con le tabelle.

Shares