Modele de design de masă pe web

Tabelele sunt un model de design pentru afișarea unor cantități mari de date în rânduri și coloane, făcându-le eficiente pentru a face analize comparative pe obiecte categorice. Tabelele au fost folosite în acest scop încă din secolul al ^II- lea și când lumea a început să devină digitală, mesele au venit împreună cu noi.

Era inevitabil ca web-ul să suporte afișarea datelor într-un format tabelar. Tabelele HTML prezintă datele tabulare într-un mod adecvat din punct de vedere semantic și structural. Cu toate acestea, stilurile implicite de pe tabelele HTML nu sunt tocmai cel mai plăcut lucru estetic pe care l-ați văzut vreodată. În funcție de designul vizual dorit, a fost necesar un efort pe partea CSS pentru a înfrumuseța aceste tabele. În urmă cu un deceniu, un articol cu ​​„Top 10 modele de tabel CSS” a fost publicat pe Smashing Magazine și continuă să atragă mult trafic până în prezent.

Web-ul a evoluat foarte mult în ultimul deceniu și este mai convenabil ca niciodată să faceți site-ul sau aplicația dvs. să se adapteze la fereastra în care este vizualizată. Acestea fiind spuse, trebuie să continuăm să facem alegeri de design considerate, care să nu compromită accesibilitate. Deoarece tabelele nu par să piardă din favoare prea curând, să vedem cum pot fi create tabelele pe web în 2019.

Opțiuni numai pentru CSS

Dacă setul dvs. de date nu este atât de mare și funcții precum paginarea și sortarea nu sunt necesare, atunci luați în considerare o opțiune fără JavaScript. Puteți obține rezultate destul de frumoase care funcționează bine pe o gamă întreagă de dimensiuni de ecran, fără greutatea adăugată a unei biblioteci mari.

Din păcate, fără ajutorul JavaScript pentru o anumită manipulare DOM pe frontul accesibilității, avem doar o mână de opțiuni numai CSS. Dar pentru seturi mici de date, acestea sunt adesea suficiente.

Opțiunea 1: Nu faceți nimic

Vom începe cu un scenariu cu efort redus. Dacă datele dvs. se încadrează într-un tabel cu doar câteva coloane și o mulțime de rânduri, atunci un astfel de tabel este aproape pregătit pentru mobil pentru început.

Problema pe care ați avea-o este probabil că aveți prea mult spațiu pe ecrane mai largi, așa că ar putea fi recomandabil să „limitați” lățimea maximă a mesei cu o max-width , lăsând-o să se micșoreze după cum este necesar pe un ecran îngust.

Acest tip de model funcționează cel mai bine dacă datele dvs. în sine nu sunt linii și linii de text. Dacă sunt numere sau fraze scurte, probabil că puteți scăpa fără a face mare lucru.

Opțiunea 2: Stilează Scroll

David Bushell și-a scris tehnica pentru tabele receptive încă din 2012, care presupunea invocarea overflow-ului și permiterea utilizatorilor să deruleze pentru a vedea mai multe date. S-ar putea argumenta că aceasta nu este tocmai o soluție receptivă, dar din punct de vedere tehnic, containerul răspunde la lățimea ferestrei de vizualizare.

Să ne uităm mai întâi la debordarea „de bază”. Imaginați-vă că folosesc ghilimele de aer în jurul valorii de bază, pentru că stilul pentru umbrele derulante este orice altceva. Totuși, în acest caz, „de bază” se referă la faptul că tabelul nu se transformă în niciun fel.

Această tehnică de derulare a umbrelor provine de la Roma Komarov și Lea Verou care își schimbă ideile pentru a crea magie. Se bazează pe utilizarea mai multor gradienți (liniari și radiali) ca imagini de fundal pe elementul care îl conține și pe utilizarea background-attachment: local pentru a poziționa fundalul în raport cu conținutul său.

Ceea ce este frumos la această tehnică este că, pentru browserele care nu acceptă umbre de defilare, puteți derula în continuare tabelul în mod normal. Nu rupe layout-ul deloc.

O altă opțiune de defilare ar fi să răsturnați anteturile tabelului de la o configurație de rând la o configurație de coloană, în timp ce se aplică o defilare orizontală pe conținutul elementului <tbody> . Această tehnică folosește comportamentul Flexbox pentru a transforma rândurile tabelului în coloane.

Aplicând display: flex la tabel, se face ca <thead> și <tbody> ambii copii flex, care sunt în mod implicit așezați unul lângă celălalt pe aceeași linie flexibilă.

De asemenea, facem din elementul <tbody> un container flexibil, făcând astfel toate elementele <tr> din el, copii flex așezați într-o singură linie flexibilă. În cele din urmă, fiecare celulă de tabel trebuie să aibă afișarea setat să block în loc de table-cell implicită.

Avantajul acestei tehnici este că anteturile sunt întotdeauna în vedere, ca un efect de antet fix, astfel încât utilizatorii să nu piardă contextul în timp ce derulează coloanele de date. Un lucru de care trebuie să rețineți este că această tehnică are ca rezultat o discrepanță între ordinea vizuală și cea a surselor, ceea ce face ca lucrurile să fie ușor neintuitive.

Presărați niște JavaScript

După cum am menționat mai devreme, opțiunile de aspect care implică transformarea tabelului prin modificarea valorilor de display au uneori implicații negative pentru accesibilitate, care necesită o anumită manipulare DOM minoră pentru a fi rectificată.

În plus, există o serie de sfaturi despre experiența utilizatorului atunci când vine vorba de proiectarea tabelelor de date de la Andrew Coyle, inclusiv funcții precum paginarea, sortarea, filtrarea și așa mai departe (funcții care necesită JavaScript pentru a le activa).

Dacă lucrați cu un set de date relativ mai simplu, poate că ați dori să vă scrieți propriile funcții pentru unele dintre aceste caracteristici.

Rânduri către blocuri, cu soluție de accesibilitate

Din câte știu eu, această tehnică de tabel de date receptiv a apărut din articolul CSS-Tricks „Responsive Data Tables” de Chris Coyier din 2011. De atunci, a fost adaptată și extinsă de mulți alții.

Esența acestei tehnici este de a utiliza o interogare media pentru a comuta proprietatea de afișare a elementului tabel și a copiilor săi pentru a block într-o fereastră de vizualizare îngustă.

Pe un ecran îngust, anteturile tabelului sunt ascunse vizual, dar există încă în arborele de accesibilitate. Aplicând atribute de date celulelor tabelului, putem afișa apoi etichete pentru date prin CSS, păstrând în același timp conținutul etichetei în HTML. Consultați CodePen-ul de mai jos pentru a afla cum arată marcajul și stilurile:

Metoda originală aplică o lățime pe pseudo-elementul care afișează textul etichetei, dar asta înseamnă că ar trebui să cunoașteți cantitatea de spațiu de care are nevoie eticheta pentru început. Exemplul de mai sus folosește o abordare ușor diferită, în care eticheta și datele sunt fiecare pe părți opuse ale blocului lor.

Putem obține un astfel de efect prin intermediul marjelor automate într-un context de formatare flexibilă. Dacă setăm proprietatea de afișare pentru fiecare element <td> la flex, deoarece pseudo-elementele generează casete ca și cum ar fi copii imediati ai elementului lor de origine, ele devin copii flex ai <td> .

După aceea, este o chestiune de a seta margin-right: auto pe pseudo-element pentru a împinge conținutul celulei până la marginea extremă a celulei.

O altă abordare care face aspectul ferestrei înguste este utilizarea unei combinații de Grid și display: contents . Vă rugăm să rețineți că display: contents browserelor compatibile are probleme de accesibilitate în acest moment și această metodă nu ar trebui utilizată în producție până când aceste erori nu sunt remediate.

Dar poate că citiți asta după ce acele erori au fost rezolvate, în acest caz, iată o opțiune alternativă de aspect.

Fiecare element <tr> este setat să display: grid , iar fiecare element <td> este setat să display: contents . Doar copiii imediati ai unui container grilă participă într-un context de formatare grilă; în acest caz, este elementul <td> .

Când display: contents este aplicat <td> , acesta este „înlocuit” cu conținutul său, în acest caz, pseudo-elementul și <span> din cadrul <td> devin în schimb copiii grilei.

Ceea ce îmi place la această abordare este capacitatea de a folosi max-content pentru a dimensiona coloana de pseudo-elemente, asigurându-se că coloana va fi întotdeauna lățimea celei mai lungi etichete, fără ca noi să fim nevoiți să îi atribuim manual o valoare a lățimii.

În viitor, când valorile de dimensionare ale min-content , max-content și fit-content (acoperite de Modulul de dimensionare intrinsec și extrinseci CSS Nivelul 3) sunt acceptate ca valori generale de width și height , vom avea și mai multe opțiuni pentru așezare lucrurile afară.

Dezavantajul acestei abordări este că aveți nevoie de acel <span> sau <p> suplimentar în jurul conținutului din celula tabelului dacă nu a avut deja unul, altfel, nu ar exista nicio modalitate de a-i aplica stiluri.

Paginare simplă

Acest exemplu arată o implementare de bază de paginare care a fost modificată din acest CodePen de Gjore Milevski pentru a pagina pe rânduri de tabel în loc de div-uri. Este o extensie a exemplului „style the scroll” discutat în secțiunea anterioară.

Din punct de vedere al aspectului, Flexbox este foarte util pentru poziționarea elementelor de paginare pe diferite dimensiuni ale ferestrelor de vizualizare. Proiectele diferite vor avea cerințe diferite, dar versatilitatea Flexbox ar trebui să vă permită să faceți față acestor diferențe în consecință.

În acest caz, paginarea este centrată pe pagină și deasupra tabelului. Comenzile pentru navigarea înapoi și înainte sunt plasate de fiecare parte a indicatorilor de pagină pe ecranele mai largi, dar toate cele patru apar deasupra indicatorilor de pagină pe ecranele înguste.

Putem face acest lucru prin creșterea proprietății order . Reordonarea vizuală a conținutului trebuie făcută întotdeauna cu atenție, deoarece această proprietate nu schimbă ordinea sursei, ci doar modul în care apare pe ecrane.

Sortare simplă

Acest exemplu arată o implementare de sortare de bază modificată din acest fragment de cod de Peter Noble pentru a satisface atât text, cât și cifre:

Ar fi util să existe un fel de indicator pentru ce coloană este sortată în prezent și în ce ordine. Putem face asta prin adăugarea de clase CSS care pot fi apoi stilate după cum doriți. În acest caz, simbolurile indicatoare sunt pseudo-elemente care sunt comutate când se face clic pe antetul țintă.

Căutare simplă

Acest exemplu este o funcționalitate de filtrare de bază care iterează prin tot conținutul textual al fiecărei celule de tabel și aplică o clasă CSS pentru a ascunde toate rândurile care nu se potrivesc cu câmpul de introducere a căutării.

O astfel de implementare este relativ naivă și, dacă cazul dvs. de utilizare o cere, ar putea avea sens să căutați pe coloană. În acest scenariu, ar putea fi o idee bună să aveți fiecare câmp de intrare ca parte a tabelului în coloanele respective.

Lasă o bibliotecă să se ocupe de asta

Fragmentele JavaScript de mai sus servesc pentru a demonstra modul în care tabelele cu cantități mai mari de date pot fi îmbunătățite pentru a ușura viața utilizatorilor acestor tabele. Dar cu seturi de date foarte mari, probabil că ar avea sens să folosești o bibliotecă existentă pentru a-ți gestiona tabelele mari.

Modelul de comutare a coloanelor este unul prin care coloanele neesențiale sunt ascunse pe ecrane mai mici. În mod normal, nu sunt un fan al ascunderii conținutului pur și simplu pentru că fereastra de vizualizare este îngustă, dar această abordare a lui Maggie Costello Wachs de la Filament Group rezolvă problema mea, oferind un meniu derulant care permite utilizatorilor să comute înapoi coloanele ascunse în vedere.

Articolul de mai sus a fost publicat în 2011, dar Filament Group a dezvoltat de atunci o suită completă de pluginuri de tabele receptive cunoscute sub numele de Tablesaw, care include funcții precum sortarea, selecția rândurilor, internaționalizarea și așa mai departe.

Caracteristica de comutare a coloanei din TableSaw nu mai depinde, de asemenea, de jQuery, spre deosebire de exemplele din articolul original. Tablesaw este una dintre singurele biblioteci pe care le-am putut găsi care nu are o dependență de jQuery în acest moment.

Încheierea

Există o multitudine de modele de design de tabel și abordarea pe care o alegeți depinde în mare măsură de tipul de date pe care le aveți și de publicul țintă pentru acele date. La sfârșitul zilei, tabelele sunt o metodă de organizare și prezentare a datelor. Este important să vă dați seama ce informații contează cel mai mult pentru utilizatorii dvs. și să decideți asupra unei abordări care să răspundă cel mai bine nevoilor acestora.

Lectură suplimentară

• „Tabele receptive numai pentru CSS”, David Bushell
• „Tabele accesibile, simple, receptive”, Davide Rizzo, CSS-Tricks
• „Aspect de masă receptiv”, Matt Smith
• „Modele receptive: tabele”, Brad Frost
• „Hei, este încă în regulă să folosești tabele”, Adrian Roselli
• „Tabele, proprietăți de afișare CSS și ARIA”, Adrian Roselli
• „Tabelele de date”, Heydon Pickering