Despre autor
Chen Hui Jing este un designer și dezvoltator autodidact cu o dragoste nebună pentru CSS. Reducerea liniilor de cod în proiectele sale web o face extrem de fericită. Ea …Mai multe despreHuijing↬
- 11 min read
- CSS,JavaScript,Design Patterns,Responsive Web Design
- Salvat pentru citire offline
- Share on Twitter, LinkedIn
Tabelele sunt un model de design pentru afișarea unor cantități mari de date în rânduri și coloane, ceea ce le face eficiente pentru a face analize comparative pe obiecte categorice. Tabelele au fost folosite în acest scop încă din secolul al II-lea, iar când lumea a început să devină digitală, tabelele au venit odată cu noi.
Era inevitabil ca web-ul să susțină afișarea datelor în format tabelar. Tabelele HTML prezintă datele tabulare într-o manieră semantică și structurală adecvată. Cu toate acestea, stilurile implicite ale tabelelor HTML nu sunt chiar 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 oarecare efort pe partea de CSS pentru a înfrumuseța aceste tabele. În urmă cu un deceniu, pe Smashing Magazine a fost publicat un articol cu “Top 10 CSS Table Designs”, care continuă să aibă mult trafic și în prezent.
Web-ul a evoluat foarte mult în ultimul deceniu și este mai convenabil ca niciodată să faci ca site-ul sau aplicația ta să se adapteze la viewportul în care este vizualizat. Acestea fiind spuse, trebuie să continuăm să facem alegeri de design ponderate care să nu compromită accesibilitatea. Din moment ce tabelele nu par să cadă în dizgrație prea curând, haideți să vedem cum pot fi create tabelele pe web în 2019.
Opțiuni exclusiv CSS
Dacă setul dvs. de date nu este atât de mare, iar caracteristici precum paginarea și sortarea nu sunt necesare, atunci luați în considerare o opțiune fără JavaScript. Puteți obține niște rezultate destul de frumoase care funcționează bine pe o întreagă gamă de dimensiuni de ecran fără greutatea suplimentară a unei biblioteci mari.
Din păcate, fără ajutorul JavaScript pentru unele manipulări DOM pe partea de accesibilitate, 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. încap într-un tabel cu doar câteva coloane și multe rânduri, atunci un astfel de tabel este destul de pregătit pentru mobil de la bun început.
Problema pe care ați avea-o este probabil aceea de a avea prea mult spațiu pe ecrane mai largi, așa că ar fi recomandabil să “plafonați” lățimea maximă a tabelului cu un max-width, lăsându-l în același timp să se micșoreze după cum este necesar pe un ecran îngust.
Vezi tabelul Pen Table #1: Puține coloane, multe rânduri de (Chen Hui Jing) pe CodePen.
Acest tip de model funcționează cel mai bine dacă datele dvs. în sine nu sunt linii și linii de text. Dacă sunt numerice sau fraze scurte, probabil că puteți scăpa fără să faceți prea multe.
Opțiunea 2: Style The Scroll
David Bushell a scris despre tehnica sa pentru tabelele responsive în 2012, care implica invocarea supraîncărcării și permiterea utilizatorilor să deruleze pentru a vedea mai multe date. S-ar putea argumenta că aceasta nu este chiar o soluție responsivă, dar, din punct de vedere tehnic, containerul răspunde la lățimea viewportului.
Să ne uităm mai întâi la revărsarea “de bază”. Imaginați-vă că folosesc ghilimele de aer în jurul lui basic, deoarece stilizarea pentru umbrele de defilare este orice altceva. Totuși, în acest caz, “basic” se referă la faptul că tabelul nu se transformă în niciun fel.
Vezi Pen Table #3: Style the scroll (basic) de Chen Hui Jing pe CodePen.
Această tehnică pentru a face umbre de defilare provine de la Roma Komarov și Lea Verou, care și-au reluat reciproc ideile pentru a crea magie. Se bazează pe utilizarea mai multor gradiente (liniare și radiale) 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.
Ce este frumos la această tehnică este că, pentru browserele care nu acceptă umbrele de defilare, puteți în continuare să derulați tabelul în mod normal. Nu strică deloc aspectul.
O altă opțiune de derulare ar fi să întoarceți anteturile tabelului de la o configurație de rând la o configurație de coloană, aplicând în același timp o derulare orizontală asupra conținutului elementului <tbody>. Această tehnică valorifică comportamentul Flexbox pentru a transforma rândurile tabelului în coloane.
Vezi Pen Table #3: Style the scroll (flipped headers) by Chen Hui Jing on CodePen.
Aplicând display: flex la tabel, face ca <thead> și <tbody> să fie amândoi copii flexibili, care sunt în mod implicit așezați unul lângă altul pe aceeași linie flexibilă.
De asemenea, facem din elementul <tbody> un container flexibil, făcând astfel ca toate elementele <tr> din cadrul acestuia să fie copii flexibili așezați, de asemenea, pe o singură linie flexibilă. În cele din urmă, fiecare celulă de tabel trebuie să aibă afișajul lor setat la block în loc de table-cell implicit.
Vantajul acestei tehnici este că antetele sunt întotdeauna la vedere, ca un efect de antet fix, astfel încât utilizatorii nu pierd contextul pe măsură ce parcurg coloanele de date. Un lucru de luat în seamă este că această tehnică are ca rezultat o discrepanță între ordinea vizuală și cea a sursei, iar acest lucru face ca lucrurile să fie ușor neintuitive.
Sprinkle On Some JavaScript
După cum am menționat mai devreme, opțiunile de aspect care implică transformarea tabelului prin modificarea valorilor display au uneori implicații negative pentru accesibilitate, care necesită unele manipulări DOM minore pentru a fi corectate.
În plus, există o serie de sfaturi privind experiența utilizatorului atunci când vine vorba de proiectarea tabelelor de date de la Andrew Coyle, inclusiv caracteristici precum paginarea, sortarea, filtrarea și așa mai departe (caracteristici care necesită un anumit JavaScript pentru a fi activate).
Dacă lucrați cu un set de date relativ mai simplu, poate doriți să vă scrieți propriile funcții pentru unele dintre aceste caracteristici.
Rows To Blocks, With Accessibility Fix
Din câte știu eu, această tehnică de tabele de date responsive a apărut în urma articolului CSS-Tricks “Responsive Data Tables” de Chris Coyier în 2011. De atunci, ea a fost adaptată și dezvoltată 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 la block pe un viewport îngust.
Pe un ecran îngust, anteturile tabelului sunt ascunse vizual, dar există în continuare în arborele de accesibilitate. Aplicând atribute de date la celulele tabelului, putem apoi afișa etichete pentru date prin CSS, păstrând în același timp conținutul etichetei în HTML. Vă rugăm să consultați CodePen-ul de mai jos pentru a vedea cum arată marcajul și stilurile:
Vezi tabelul Pen Table #2: Rows to blocks de Chen Hui Jing pe CodePen.
Metoda originală aplică o lățime pe pseudo-elementul care afișează textul etichetei, dar asta înseamnă că ar trebui să știți de la început de cât spațiu are nevoie eticheta dvs. Exemplul de mai sus folosește o abordare ușor diferită, prin care eticheta și datele se află fiecare pe laturi opuse ale blocului care le conține.
Potem obține un astfel de efect prin intermediul marginilor automate într-un context de formatare flex. Dacă setăm proprietatea de afișare pentru fiecare element <td> la flex, deoarece pseudoelementele generează casete ca și cum ar fi copii imediați ai elementului lor de origine, acestea devin copii flex ai <td>.
După aceea, este o chestiune de setare a margin-right: auto pe pseudoelement pentru a împinge conținutul celulei până la marginea extremă a celulei.
O altă abordare care face aspectul de vizualizare îngustă este utilizarea unei combinații de Grid și display: contents. Vă rugăm să rețineți că display: contents în browserele de suport are probleme de accesibilitate în acest moment, iar această metodă nu ar trebui să fie folosită în producție până când aceste bug-uri nu sunt rezolvate.
Dar poate că citiți acest articol după ce aceste bug-uri au fost rezolvate, în acest caz, iată o opțiune alternativă de layout.
Vezi Pen Table #2: Rows to blocks (alt) de Chen Hui Jing pe CodePen.
Care element <tr> este setat la display: grid, iar fiecare element <td> este setat la display: contents. Numai copiii imediați ai unui container de grilă participă la un context de formatare a grilei; în acest caz, este vorba de elementul <td>.
Când display: contents este aplicat la <td>, acesta este “înlocuit” de conținutul său, în acest caz, pseudo-elementul și <span> din cadrul <td> devin în schimb copiii grilei.
Ce-mi place la această abordare este posibilitatea de a folosi max-content pentru a dimensiona coloana de pseudoelemente, asigurându-ne că coloana va avea întotdeauna lățimea celei mai lungi etichete, fără să fim nevoiți să atribuim manual o valoare de lățime pentru aceasta.
În viitor, când valorile de dimensionare min-content, max-content și fit-content (acoperite de modulul de dimensionare intrinsecă & CSS Intrinsecă & Extrinsecă de nivel 3) vor fi acceptate ca valori generale width și height, vom avea și mai multe opțiuni pentru dispunerea lucrurilor.
Inconvenientul acestei abordări este că aveți nevoie de acel <span> sau <p> suplimentar în jurul conținutului din celula tabelului, dacă acesta nu avea deja unul, altfel, nu ar exista nicio modalitate de a-i aplica stiluri.
Paginare simplă
Acest exemplu arată o implementare de bază a paginării care a fost modificată de pe acest CodePen de către 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ă.
Vezi tabelul Pen Table #4: Paginare simplă de Chen Hui Jing pe CodePen.
Din punct de vedere al aspectului, Flexbox este foarte util pentru poziționarea elementelor de paginare pe diferite dimensiuni ale viewportului. Diferitele proiecte vor avea cerințe diferite, dar versatilitatea Flexbox ar trebui să vă permită să vă ocupați de aceste diferențe în mod corespunzător.
În acest caz, paginarea este centrată pe pagină și deasupra tabelului. Controalele pentru navigarea înapoi și înainte sunt plasate de o parte și de alta a indicatorilor de pagină pe ecranele mai largi, dar toate patru apar deasupra indicatorilor de pagină pe ecranele înguste.
Potem face acest lucru prin levarea 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 aceasta apare pe ecrane.
Sortare simplă
Acest exemplu arată o implementare de bază a sortării modificată din acest fragment de cod de Peter Noble pentru a se ocupa atât de text, cât și de cifre:
Vezi Pen #Table 5: Sortare simplă de Chen Hui Jing pe CodePen.
Ar fi util să avem un fel de indicator al coloanei care este în prezent sortată și în ce ordine. Putem face acest lucru prin adăugarea de clase CSS care pot fi apoi stilizate cum doriți. În acest caz, simbolurile indicatoare sunt pseudo-elemente care sunt comutate atunci când se face clic pe antetul țintă.
Cercetare simplă
Acest exemplu este o funcționalitate de filtrare de bază care parcurge 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.
Vezi tabelul Pen Table #6: Filtrare simplă de Chen Hui Jing pe CodePen.
O astfel de implementare este relativ naivă, iar dacă cazul de utilizare o cere, ar putea avea sens să căutați în schimb 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 lor respective.
Lăsați o bibliotecă să se ocupe de asta
Scenele JavaScript de mai sus servesc la demonstrarea modului în care tabelele cu cantități mai mari de date pot fi îmbunătățite pentru a le face viața mai ușoară utilizatorilor acestor tabele. Dar cu seturi de date cu adevărat mari, ar putea avea probabil sens să folosiți o bibliotecă existentă pentru a gestiona tabelele dvs. 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ă viewportul este îngust, dar această abordare a lui Maggie Costello Wachs de la Filament Group rezolvă acest scrupul al meu prin furnizarea unui meniu derulant care permite utilizatorilor să comute coloanele ascunse înapoi la vedere.
Articolul de mai sus a fost publicat în 2011, dar Filament Group a dezvoltat de atunci o suită completă de pluginuri de tabele responsive cunoscută sub numele de Tablesaw, care include funcții precum sortarea, selectarea rândurilor, internaționalizarea și așa mai departe.
Funcția de comutare a coloanelor din TableSaw, de asemenea, nu mai depinde 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.
Încheiere
Există o multitudine de modele de proiectare a tabelelor, iar abordarea pe care o alegeți depinde foarte mult de tipul de date pe care le aveți și de publicul țintă pentru aceste date. În cele din urmă, 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.
Lecturi suplimentare
- “CSS-Only Responsive Tables,” David Bushell
- “Accessible, Simple, Responsive Tables,” Davide Rizzo, CSS-Tricks
- “Responsive Table Layout,” Matt Smith
- “Responsive Patterns: Tables,” 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) .