About The Author
Chen Hui Jing è una designer e sviluppatrice autodidatta con un amore smodato per i CSS. Ridurre le linee di codice nei suoi progetti web la rende estremamente felice. Lei …More aboutHuijing↬
- 11 min read
- CSS,JavaScript,Design Patterns,Responsive Web Design
- Salvato per lettura offline
- Condividi su Twitter, LinkedIn
Le tabelle sono un modello di progettazione per la visualizzazione di grandi quantità di dati in righe e colonne, rendendole efficienti per fare analisi comparative su oggetti categorici. Le tabelle sono state usate per questo scopo già nel secondo secolo e quando il mondo ha iniziato a diventare digitale, le tabelle sono venute con noi.
Era inevitabile che il web supportasse la visualizzazione di dati in formato tabellare. Le tabelle HTML presentano dati tabulari in un modo semantico e strutturalmente appropriato. Tuttavia, gli stili predefiniti delle tabelle HTML non sono esattamente la cosa esteticamente più piacevole che abbiate mai visto. A seconda del design visivo desiderato, è stato necessario qualche sforzo sul fronte CSS per abbellire quelle tabelle. Un decennio fa, un articolo con i “Top 10 CSS Table Designs” è stato pubblicato su Smashing Magazine, e continua ancora oggi a ricevere molto traffico.
Il web si è evoluto molto nell’ultimo decennio, ed è più conveniente che mai far adattare il vostro sito o applicazione al viewport in cui viene visualizzato. Detto questo, dobbiamo continuare a fare scelte di design ponderate che non compromettano l’accessibilità. Dal momento che le tabelle non sembrano cadere presto in disgrazia, vediamo come le tabelle possono essere create sul web nel 2019.
Opzioni solo CSS
Se il tuo set di dati non è così grande, e caratteristiche come la paginazione e l’ordinamento non sono necessarie, allora considera un’opzione senza JavaScript. Si possono ottenere dei bei risultati che funzionano bene su un’intera gamma di dimensioni dello schermo senza il peso aggiunto di una grande libreria.
Purtroppo, senza l’aiuto di JavaScript per qualche manipolazione del DOM sul fronte dell’accessibilità, abbiamo solo una manciata di opzioni solo CSS. Ma per piccole serie di dati, sono spesso sufficienti.
Opzione 1: Non fare nulla
Partiamo con uno scenario a basso sforzo. Se i tuoi dati stanno in una tabella con poche colonne e molte righe, allora tale tabella è praticamente pronta per il mobile, per cominciare.
Il problema che avresti è probabilmente avere troppo spazio su schermi più larghi, quindi potrebbe essere consigliabile “coprire” la larghezza massima della tabella con un max-width lasciando che si riduca come necessario su uno schermo stretto.
Vedi la Pen Table #1: Poche colonne, molte righe di (Chen Hui Jing) su CodePen.
Questo tipo di schema funziona meglio se i tuoi dati non sono righe e righe di testo. Se sono numerici, o frasi brevi, probabilmente potete cavarvela senza fare molto.
Opzione 2: Style The Scroll
David Bushell ha scritto la sua tecnica per le tabelle responsive nel 2012, che coinvolgeva il richiamo dell’overflow e permetteva agli utenti di scorrere per vedere più dati. Si potrebbe obiettare che questa non è esattamente una soluzione responsive, ma tecnicamente, il contenitore sta rispondendo alla larghezza del viewport.
Guardiamo prima l’overflow “base”. Immaginate che io usi le virgolette intorno a basic, perché lo stile delle ombre di scorrimento è tutt’altro. Comunque, in questo caso, “basic” si riferisce al fatto che la tabella non si trasforma in alcun modo.
Si veda il Pen Table #3: Style the scroll (basic) di Chen Hui Jing su CodePen.
Questa tecnica per fare ombre a scorrimento viene da Roma Komarov e Lea Verou che si scambiano idee per creare magia. Si basa sull’uso di gradienti multipli (lineari e radiali) come immagini di sfondo sull’elemento contenente, e sull’uso di background-attachment: local per posizionare lo sfondo rispetto al suo contenuto.
La cosa bella di questa tecnica è che per i browser che non supportano le ombre a scorrimento, si può ancora scorrere la tabella come al solito. Non rompe affatto il layout.
Un’altra opzione di scorrimento sarebbe quella di capovolgere le intestazioni della tabella da una configurazione a righe a una configurazione a colonne, mentre si applica uno scorrimento orizzontale sul contenuto dell’elemento <tbody>. Questa tecnica sfrutta il comportamento di Flexbox per trasformare le righe della tabella in colonne.
Vedi la tabella Pen #3: Style the scroll (flipped headers) di Chen Hui Jing su CodePen.
Applicando display: flex alla tabella, rende gli elementi <thead> e <tbody> entrambi figli flex, che per default sono disposti uno accanto all’altro sulla stessa linea flex.
Rendiamo anche l’elemento <tbody> un contenitore flex, rendendo così anche tutti gli elementi <tr> al suo interno figli flex disposti su una singola linea flex. Infine, ogni cella della tabella deve avere la sua visualizzazione impostata su block invece del predefinito table-cell.
Il vantaggio di questa tecnica è che le intestazioni sono sempre in vista, come un effetto intestazione fissa, così gli utenti non perdono il contesto mentre scorrono le colonne di dati. Una cosa da notare è che questa tecnica comporta una discrepanza tra l’ordine visivo e quello di origine, e questo rende le cose leggermente poco intuitive.
Sprinkle On Some JavaScript
Come menzionato prima, le opzioni di layout che coinvolgono il morphing della tabella modificando i valori display a volte hanno implicazioni negative per l’accessibilità, che richiedono qualche piccola manipolazione del DOM per essere corrette.
Inoltre, ci sono un certo numero di suggerimenti per l’esperienza dell’utente quando si tratta di progettare tabelle di dati da Andrew Coyle, comprese caratteristiche come la paginazione, l’ordinamento, il filtraggio, e così via (caratteristiche che richiedono un po’ di JavaScript per essere abilitate).
Se stai lavorando con un set di dati relativamente più semplice, forse vorrai scrivere le tue funzioni per alcune di queste caratteristiche.
Rows To Blocks, With Accessibility Fix
Per quanto ne so, questa tecnica di tabella dati responsive è nata dall’articolo CSS-Tricks “Responsive Data Tables” di Chris Coyier nel 2011. Da allora è stata adattata e ampliata da molti altri.
Il succo di questa tecnica è di fare uso di una media query per passare la proprietà display dell’elemento tabella e dei suoi figli a block su una viewport stretta.
Su uno schermo stretto, le intestazioni della tabella sono visivamente nascoste, ma esistono ancora nell’albero dell’accessibilità. Applicando gli attributi dei dati alle celle della tabella, possiamo quindi visualizzare le etichette per i dati tramite CSS, mantenendo il contenuto dell’etichetta nell’HTML. Fate riferimento al CodePen qui sotto per vedere come appaiono il mark-up e gli stili:
Vedi il Pen Table #2: Rows to blocks di Chen Hui Jing su CodePen.
Il metodo originale applica una larghezza allo pseudo-elemento che mostra il testo dell’etichetta, ma questo significa che avreste bisogno di conoscere la quantità di spazio di cui la vostra etichetta ha bisogno per cominciare. L’esempio precedente usa un approccio leggermente diverso, per cui l’etichetta e i dati sono ognuno sui lati opposti del blocco che li contiene.
Possiamo ottenere un tale effetto tramite i margini automatici in un contesto di formattazione flessibile. Se impostiamo la proprietà display per ogni elemento <td> su flex, poiché gli pseudo-elementi generano caselle come se fossero figli immediati del loro elemento di origine, diventano figli flex del <td>.
Dopo di che, è una questione di impostare margin-right: auto sullo pseudo-elemento per spingere il contenuto della cella al bordo estremo della cella.
Un altro approccio per fare il layout della viewport stretta è usare una combinazione di Grid e display: contents. Si prega di notare che display: contents nei browser di supporto ha problemi di accessibilità al momento, e questo metodo non dovrebbe essere usato in produzione fino a quando questi bug non saranno risolti.
Ma forse stai leggendo questo dopo che questi bug sono stati risolti, in questo caso, ecco un’opzione di layout alternativa.
Vedi la Pen Table #2: Rows to blocks (alt) di Chen Hui Jing su CodePen.
Ogni elemento <tr> è impostato a display: grid, e ogni elemento <td> è impostato a display: contents. Solo i figli immediati di un contenitore di griglia partecipano a un contesto di formattazione di griglia; in questo caso, è l’elemento <td>.
Quando display: contents viene applicato al <td>, viene “sostituito” dal suo contenuto, in questo caso, lo pseudo-elemento e il <span> dentro il <td> diventano invece i figli della griglia.
Quello che mi piace di questo approccio è la possibilità di usare max-content per dimensionare la colonna di pseudo-elementi, assicurando che la colonna avrà sempre la larghezza dell’etichetta più lunga, senza che noi dobbiamo assegnare manualmente un valore di larghezza per essa.
In futuro, quando i valori di dimensionamento di min-content, max-content e fit-content (coperti dal CSS Intrinsic & Extrinsic Sizing Module Level 3) saranno supportati come valori generali width e height, avremo ancora più opzioni per disporre le cose.
Lo svantaggio di questo approccio è che hai bisogno di quel <span> o <p> aggiuntivo intorno al contenuto della cella della tua tabella se non ne ha già uno, altrimenti non ci sarebbe modo di applicarvi degli stili.
Paginazione semplice
Questo esempio mostra un’implementazione di paginazione di base che è stata modificata su questo CodePen da Gjore Milevski per paginare su righe di tabella invece che su div. È un’estensione dell’esempio “style the scroll” discusso nella sezione precedente.
Guarda la Pen Table #4: Simple pagination di Chen Hui Jing su CodePen.
Da una prospettiva di layout, Flexbox è molto utile per posizionare gli elementi di paginazione attraverso varie dimensioni della finestra. Progetti diversi avranno requisiti diversi, ma la versatilità di Flexbox dovrebbe permetterti di soddisfare queste differenze di conseguenza.
In questo caso, la paginazione è centrata sulla pagina e sopra la tabella. I controlli per navigare avanti e indietro sono posizionati su entrambi i lati degli indicatori di pagina su schermi più larghi, ma tutti e quattro appaiono sopra gli indicatori di pagina su schermi stretti.
Possiamo fare questo levando la proprietà order. Il riordino visivo del contenuto dovrebbe sempre essere fatto con attenzione perché questa proprietà non cambia l’ordine di origine – solo come appare sugli schermi.
Semplice ordinamento
Questo esempio mostra un’implementazione di base dell’ordinamento modificata da questo frammento di codice di Peter Noble per soddisfare sia il testo che i numeri:
Guarda il Pen #Table 5: Simple sorting di Chen Hui Jing su CodePen.
Sarebbe utile avere una sorta di indicatore di quale colonna è attualmente ordinata e in quale ordine. Possiamo farlo con l’aggiunta di classi CSS che possono poi essere stilizzate come si vuole. In questo caso, i simboli indicatori sono pseudo-elementi che vengono attivati quando si clicca sull’intestazione di destinazione.
Ricerca semplice
Questo esempio è una funzionalità di filtraggio di base che itera attraverso tutto il contenuto testuale di ogni cella della tabella e applica una classe CSS per nascondere tutte le righe che non corrispondono al campo di ricerca.
Vedi la tabella Pen Table #6: Simple filtering di Chen Hui Jing su CodePen.
Una tale implementazione è relativamente ingenua, e se il tuo caso d’uso lo richiede, potrebbe invece avere senso cercare per colonna. In questo scenario, potrebbe essere una buona idea avere ogni campo di input come parte della tabella nelle loro rispettive colonne.
Lascia che se ne occupi una biblioteca
I frammenti JavaScript di cui sopra servono a dimostrare come le tabelle con grandi quantità di dati possano essere migliorate per rendere la vita più facile agli utenti di quelle tabelle. Ma con insiemi di dati veramente grandi, potrebbe probabilmente avere senso usare una libreria esistente per gestire le tabelle di grandi dimensioni.
Il modello di alternanza delle colonne è quello per cui le colonne non essenziali sono nascoste sugli schermi più piccoli. Normalmente, non sono un fan di nascondere il contenuto semplicemente perché la finestra è stretta, ma questo approccio di Maggie Costello Wachs di Filament Group risolve questa mia remora fornendo un menu a tendina che permette agli utenti di riportare in vista le colonne nascoste.
L’articolo di cui sopra è stato pubblicato nel 2011, ma Filament Group da allora ha sviluppato una suite completa di plugin per tabelle responsive conosciuta come Tablesaw, che include caratteristiche come l’ordinamento, la selezione delle righe, l’internazionalizzazione e così via.
La funzione di alternanza delle colonne in TableSaw inoltre non dipende più da jQuery, a differenza degli esempi dell’articolo originale. Tablesaw è una delle poche librerie che ho potuto trovare che non ha una dipendenza da jQuery al momento.
Concludendo
C’è una miriade di modelli di progettazione di tabelle là fuori, e quale approccio scegliete dipende molto dal tipo di dati che avete e dal pubblico a cui sono destinati. Alla fine della giornata, le tabelle sono un metodo per l’organizzazione e la presentazione dei dati. È importante capire quali informazioni sono più importanti per i vostri utenti e decidere un approccio che serva meglio i loro bisogni.
Altre letture
- “Tabelle responsive solo CSS”, David Bushell
- “Tabelle accessibili, semplici, responsive”, Davide Rizzo, CSS-Tricks
- “Layout delle tabelle responsive”, Matt Smith
- “Patterns responsive: Tabelle”, Brad Frost
- “Hey, It’s Still OK To Use Tables”, Adrian Roselli
- “Tables, CSS Display Properties, And ARIA”, Adrian Roselli
- “Data Tables”, Heydon Pickering
(ra, il)