Modelli Di Design Della Tabella Sul Web

Le tabelle sono un modello di progettazione per visualizzare grandi quantità di dati in righe e colonne, rendendole efficienti per eseguire analisi comparative su oggetti categoriali. I tavoli sono stati utilizzati per questo scopo già nel 2 ^° secolo e quando il mondo ha iniziato a diventare digitale, i tavoli sono arrivati ​​con noi.

Era inevitabile che il web supportasse la visualizzazione dei dati in formato tabellare. Le tabelle HTML presentano i dati tabellari in modo semantico e strutturalmente appropriato. Tuttavia, gli stili predefiniti sulle tabelle HTML non sono esattamente la cosa esteticamente più gradevole che tu abbia mai visto. A seconda del design visivo desiderato, è stato necessario uno sforzo sul fronte CSS per abbellire quelle tabelle. Un decennio fa, un articolo con i "10 migliori design di tabelle CSS" è stato pubblicato su Smashing Magazine e continua ancora a ricevere molto traffico fino ad oggi.

Il Web si è evoluto molto negli ultimi dieci anni ed è più conveniente che mai adattare il tuo sito o la tua applicazione al viewport in cui viene visualizzato. Detto questo, dobbiamo continuare a fare scelte di design ponderate che non compromettano accessibilità. Dal momento che le tabelle non sembrano cadere in disgrazia a breve, vediamo come è possibile creare tabelle sul Web nel 2019.

Opzioni solo CSS

Se il tuo set di dati non è così grande e funzionalità come l'impaginazione e l'ordinamento non sono necessarie, considera un'opzione priva di JavaScript. Puoi ottenere dei risultati piuttosto interessanti che funzionano bene su un'intera gamma di dimensioni dello schermo senza il peso aggiunto di una grande libreria.

Sfortunatamente, senza l'aiuto di JavaScript per alcune manipolazioni DOM sul fronte dell'accessibilità, abbiamo solo una manciata di opzioni solo CSS. Ma per piccoli set di dati, sono spesso sufficienti.

Opzione 1: non fare nulla

Inizieremo con uno scenario a basso sforzo. Se i tuoi dati si adattano a una tabella con solo poche colonne e molte righe, allora una tabella del genere è praticamente pronta per dispositivi mobili.

Il problema che avresti probabilmente è avere troppo spazio su schermi più ampi, quindi potrebbe essere consigliabile "limitare" la larghezza massima del tavolo con una max-width lasciandola restringere secondo necessità su uno schermo stretto.

Questo tipo di modello funziona meglio se i tuoi dati stessi non sono righe e righe di testo. Se sono frasi numeriche o brevi, probabilmente puoi cavartela senza fare molto.

Opzione 2: stile The Scroll

David Bushell ha scritto la sua tecnica per le tabelle reattive nel 2012, che prevedeva l'invocazione dell'overflow e la possibilità per gli utenti di scorrere per vedere più dati. Si potrebbe obiettare che questa non è esattamente una soluzione reattiva, ma tecnicamente il contenitore risponde alla larghezza del viewport.

Diamo prima un'occhiata all'overflow "di base". Immagina che io usi le virgolette aeree attorno alla base, perché lo stile per le ombre scorrevoli è tutt'altro che. Eppure, in questo caso, "base" si riferisce al fatto che il tavolo non si trasforma in alcun modo.

Questa tecnica per creare ombre scorrevoli viene da Roma Komarov e Lea Verou che si scambiano le idee l'una con l'altra per creare magia. Si basa sull'utilizzo di più gradienti (lineari e radiali) come immagini di sfondo sull'elemento contenitore e sull'utilizzo background-attachment: local per posizionare lo sfondo rispetto al suo contenuto.

La cosa bella di questa tecnica è che per i browser che non supportano lo scorrimento delle ombre, puoi comunque scorrere la tabella come di consueto. Non rompe affatto il layout.

Un'altra opzione di scorrimento sarebbe quella di capovolgere le intestazioni della tabella da una configurazione di riga a una configurazione di colonna, applicando uno scorrimento orizzontale al contenuto dell'elemento <tbody> . Questa tecnica sfrutta il comportamento di Flexbox per trasformare le righe della tabella in colonne.

Applicando display: flex alla tabella, <thead> e <tbody> sono entrambi figli flessibili, che per impostazione predefinita sono disposti uno accanto all'altro sulla stessa linea flessibile.

Rendiamo anche l'elemento <tbody> un contenitore flessibile, facendo così in modo che tutti gli elementi <tr> al suo interno siano figli flessibili disposti anche in una singola linea flessibile. Infine, ogni cella della tabella deve avere il display impostato su block invece del table-cell predefinito.

Il vantaggio di questa tecnica è che le intestazioni sono sempre visualizzate, come un effetto di intestazione fisso, in modo che gli utenti non perdano il contesto mentre scorrono le colonne di dati. Una cosa da prendere in considerazione è che questa tecnica si traduce in una discrepanza tra l'ordine visivo e sorgente, e questo rende le cose leggermente poco intuitive.

Cospargi un po' di JavaScript

Come accennato in precedenza, le opzioni di layout che comportano il morphing della tabella modificando i valori di display a volte hanno implicazioni negative per l'accessibilità, che richiedono alcune piccole manipolazioni del DOM per essere corrette.

Inoltre, ci sono una serie di suggerimenti per l'esperienza utente quando si tratta di progettare tabelle di dati da Andrew Coyle, incluse funzionalità come l'impaginazione, l'ordinamento, il filtraggio e così via (funzionalità che richiedono JavaScript per essere abilitate).

Se stai lavorando con un set di dati relativamente più semplice, forse ti piacerebbe scrivere le tue funzioni per alcune di queste funzionalità.

Righe a blocchi, con correzione dell'accessibilità

Per quanto ne so, questa tecnica di tabella dati reattiva è nata dall'articolo CSS-Tricks "Tabelle dati reattive" di Chris Coyier nel 2011. Da allora è stata adattata e ampliata da molti altri.

L'essenza di questa tecnica consiste nell'utilizzare una query multimediale per cambiare la proprietà di visualizzazione dell'elemento tabella e dei suoi figli in modo che block su una finestra stretta.

Su uno schermo stretto, le intestazioni delle tabelle sono nascoste visivamente, ma esistono ancora nell'albero di 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. Fare riferimento al CodePen di seguito per l'aspetto del markup e degli stili:

Il metodo originale applica una larghezza allo pseudoelemento che mostra il testo dell'etichetta, ma ciò significa che dovresti conoscere la quantità di spazio necessaria per iniziare la tua etichetta. L'esempio precedente utilizza un approccio leggermente diverso, in base al quale l'etichetta e i dati si trovano ciascuno su lati opposti del blocco contenitore.

Possiamo ottenere un tale effetto tramite margini automatici in un contesto di formattazione flessibile. Se impostiamo la proprietà display per ogni elemento <td> su flex, poiché gli pseudo-elementi generano box come se fossero figli immediati del loro elemento originario, diventano figli flex di <td> .

Dopodiché, si tratta di impostare margin-right: auto sullo pseudoelemento per spingere il contenuto della cella all'estremità più lontana della cella.

Un altro approccio per il layout della finestra stretta è l'utilizzo di una combinazione di Griglia e display: contents . Tieni presente che display: contents nei browser di supporto ha problemi di accessibilità al momento e questo metodo non dovrebbe essere utilizzato in produzione fino a quando questi bug non saranno stati risolti.

Ma forse stai leggendo questo dopo che quei bug sono stati risolti, in tal caso, ecco un'opzione di layout alternativa.

Ogni elemento <tr> è impostato per display: grid e ogni elemento <td> è impostato per display: contents . Solo i figli immediati di un contenitore di griglia partecipano a un contesto di formattazione della griglia; in questo caso, è l'elemento <td> .

Quando display: contents viene applicato a <td> , viene "sostituito" dal suo contenuto, in questo caso, lo pseudo-elemento e <span> all'interno di <td> diventano invece i figli della griglia.

Quello che mi piace di questo approccio è la possibilità di utilizzare max-content per ridimensionare la colonna di pseudo-elementi, assicurando che la colonna sia sempre la larghezza dell'etichetta più lunga, senza che 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 di width e height , avremo ancora più opzioni per la posa cose fuori.

Lo svantaggio di questo approccio è che hai bisogno di un ulteriore <span> o <p> attorno al contenuto nella cella della tabella se non ne aveva già uno, altrimenti non ci sarebbe modo di applicarvi stili.

Impaginazione semplice

Questo esempio mostra un'implementazione di impaginazione di base che è stata modificata da questo CodePen da Gjore Milevski per impaginare su righe di tabella anziché div. È un'estensione dell'esempio "stile la pergamena" discusso nella sezione precedente.

Dal punto di vista del layout, Flexbox è molto utile per posizionare gli elementi di impaginazione su varie dimensioni di viewport. Progetti diversi avranno requisiti diversi, ma la versatilità di Flexbox dovrebbe consentire di soddisfare queste differenze di conseguenza.

In questo caso, l'impaginazione è centrata sulla pagina e sopra la tabella. I controlli per la navigazione avanti e indietro sono posizionati su entrambi i lati degli indicatori di pagina su schermi più ampi, ma tutti e quattro vengono visualizzati sopra gli indicatori di pagina su schermi stretti.

Possiamo farlo sfruttando la proprietà order . Il riordino visivo del contenuto deve sempre essere effettuato con attenzione perché questa proprietà non modifica l'ordine di origine, ma solo il modo in cui appare sugli schermi.

Ordinamento semplice

Questo esempio mostra un'implementazione di ordinamento di base modificata da questo frammento di codice da Peter Noble per soddisfare sia il testo che i numeri:

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 quindi essere stilizzate come preferisci. In questo caso, i simboli dell'indicatore sono pseudo-elementi che vengono commutati quando si fa clic sull'intestazione di destinazione.

Ricerca semplice

Questo esempio è una funzionalità di filtro di base che scorre tutto il contenuto testuale di ciascuna cella della tabella e applica una classe CSS per nascondere tutte le righe che non corrispondono al campo di input della ricerca.

Tale implementazione è relativamente ingenua e, se il tuo caso d'uso lo richiede, potrebbe avere senso cercare invece per colonna. In tale scenario, potrebbe essere una buona idea avere ogni campo di input come parte della tabella nelle rispettive colonne.

Lascia che se ne occupi una libreria

Gli snippet JavaScript sopra riportati servono a dimostrare come le tabelle con quantità maggiori di dati possono essere migliorate per semplificare la vita agli utenti di tali tabelle. Ma con set di dati davvero grandi, potrebbe probabilmente avere senso utilizzare una libreria esistente per gestire le tue tabelle di grandi dimensioni.

Il modello di attivazione/disattivazione delle colonne prevede che le colonne non essenziali vengano nascoste su schermi più piccoli. Normalmente, non sono un fan di nascondere i contenuti semplicemente perché il viewport è stretto, ma questo approccio di Maggie Costello Wachs del Filament Group risolve il mio problema fornendo un menu a discesa che consente agli utenti di riattivare le colonne nascoste Visualizza.

L'articolo di cui sopra è stato pubblicato nel 2011, ma da allora Filament Group ha sviluppato una suite completa di plug-in per tabelle reattivi noti come Tablesaw, che include funzionalità come l'ordinamento, la selezione delle righe, l'internazionalizzazione e così via.

Anche la funzione di attivazione/disattivazione delle colonne in TableSaw non dipende più da jQuery, a differenza degli esempi dell'articolo originale. Tablesaw è una delle poche librerie che ho trovato che al momento non ha una dipendenza da jQuery.

Avvolgendo

Esistono una miriade di modelli di progettazione delle tabelle e l'approccio che scegli dipende fortemente dal tipo di dati che hai e dal pubblico di destinazione per quei dati. Alla fine della giornata, le tabelle sono un metodo per l'organizzazione e la presentazione dei dati. È importante capire quali informazioni contano di più per i tuoi utenti e decidere un approccio che soddisfi al meglio le loro esigenze.

Ulteriori letture

• "Tabelle reattive solo CSS", David Bushell
• "Tabelle accessibili, semplici, reattive", Davide Rizzo, CSS-Tricks
• "Disposizione del tavolo reattiva", Matt Smith
• "Modelli reattivi: tabelle", Brad Frost
• "Ehi, è ancora possibile utilizzare i tavoli", Adrian Roselli
• "Tabelle, proprietà di visualizzazione CSS e ARIA", Adrian Roselli
• "Tabelle dati", Heydon Pickering