Over de auteur
Chen Hui Jing is een autodidactisch ontwerper en ontwikkelaar met een mateloze liefde voor CSS. Het verminderen van regels code in haar web projecten maakt haar extreem gelukkig. Ze …Meer overHuijing↬
- 11 min lezen
- CSS,JavaScript,Design Patterns,Responsive Web Design
- Opgeslagen voor offline lezen
- Delen op Twitter, LinkedIn
Tabellen zijn een ontwerppatroon voor het weergeven van grote hoeveelheden gegevens in rijen en kolommen, waardoor ze efficiënt zijn voor het doen van vergelijkende analyses op categorische objecten. Tabellen werden al in de 2e eeuw voor dit doel gebruikt en toen de wereld digitaal begon te worden, gingen tabellen met ons mee.
Het was onvermijdelijk dat het web de weergave van gegevens in tabelvorm zou ondersteunen. In HTML-tabellen worden gegevens in tabelvorm op een semantische en structureel passende wijze gepresenteerd. De standaardstijlen voor HTML-tabellen zijn echter niet bepaald de meest esthetische die je ooit hebt gezien. Afhankelijk van het gewenste visuele ontwerp, was er enige inspanning nodig op het CSS-front om die tabellen te verfraaien. Een decennium geleden werd een artikel met de “Top 10 CSS Table Designs” gepubliceerd op Smashing Magazine, en het krijgt nog steeds veel verkeer tot op de dag van vandaag.
Het web is de afgelopen tien jaar sterk geëvolueerd, en het is nu handiger dan ooit om uw site of applicatie aan te passen aan het viewport waarin het wordt bekeken. Dat gezegd hebbende, moeten we weloverwogen ontwerpkeuzes blijven maken die niet ten koste gaan van de toegankelijkheid. Aangezien tabellen niet snel uit de gratie lijken te vallen, laten we eens kijken hoe tabellen in 2019 op het web kunnen worden gemaakt.
CSS-Only Options
Als uw dataset niet zo groot is, en functies zoals pagineren en sorteren niet nodig zijn, overweeg dan een JavaScript-vrije optie. U kunt een aantal mooie resultaten krijgen die goed werken op een hele reeks schermformaten zonder de extra last van een grote bibliotheek.
Gelukkig genoeg hebben we, zonder de hulp van JavaScript voor wat DOM-manipulatie op het gebied van toegankelijkheid, slechts een handvol CSS-only opties. Maar voor kleine datasets zijn die vaak voldoende.
Optie 1: Niets doen
We beginnen met een scenario dat weinig moeite kost. Als uw gegevens in een tabel met slechts een paar kolommen en veel rijen passen, dan is zo’n tabel om te beginnen al redelijk mobiel-ready.
Het probleem dat u zou hebben, is waarschijnlijk dat u op bredere schermen te veel ruimte hebt, dus het kan raadzaam zijn om de maximale breedte van de tabel te “begrenzen” met een max-width en deze op een smal scherm zo nodig te laten krimpen.
Zie de pentabel #1: Weinig kolommen, veel rijen door (Chen Hui Jing) op CodePen.
Dit soort patroon werkt het beste als uw gegevens zelf geen regels en regels tekst zijn. Als het numerieke gegevens zijn, of korte zinnen, kun je er waarschijnlijk mee wegkomen om niet veel te doen.
Optie 2: Style The Scroll
David Bushell schreef zijn techniek voor responsieve tabellen al in 2012, waarbij hij overflow opriep en gebruikers liet scrollen om meer gegevens te zien. Je zou kunnen aanvoeren dat dit niet echt een responsieve oplossing is, maar technisch gezien reageert de container op de breedte van de viewport.
Laten we eerst eens kijken naar de “basis”-overloop. Stel je voor dat ik aanhalingstekens gebruik rond basic, want de styling voor de scrollende schaduwen is allesbehalve basic. Toch verwijst “basic” in dit geval naar het feit dat de tabel op geen enkele manier transformeert.
Zie Pen Table #3: Style the scroll (basic) door Chen Hui Jing op CodePen.
Deze techniek voor het maken van scrollende schaduwen is afkomstig van Roma Komarov en Lea Verou, die elkaars ideeën afkraken om magie te creëren. De techniek berust op het gebruik van meerdere kleurverlopen (lineair en radiaal) als achtergrondafbeeldingen op het bevattende element, en het gebruik van background-attachment: local om de achtergrond ten opzichte van de inhoud te positioneren.
Het mooie van deze techniek is dat voor browsers die geen scrollende schaduwen ondersteunen, je de tabel nog steeds gewoon kunt scrollen. Het breekt de lay-out helemaal niet.
Een andere scroll-optie zou zijn om de tabel headers om te draaien van een rij configuratie naar een kolom configuratie, terwijl een horizontale scroll wordt toegepast op de inhoud van het <tbody> element. Deze techniek maakt gebruik van Flexbox-gedrag om de rijen van de tabel om te zetten in kolommen.
Zie de Pen Table #3: Style the scroll (flipped headers) door Chen Hui Jing op CodePen.
Door display: flex op de tabel toe te passen, worden de <thead> en <tbody> beide flex children, die standaard naast elkaar op dezelfde flex line worden gezet.
We maken ook van het <tbody> element een flex container, waardoor alle <tr> elementen daarbinnen ook flex children worden op een enkele flex line. Ten slotte moet de weergave van elke tabelcel worden ingesteld op block in plaats van de standaard table-cell.
Het voordeel van deze techniek is dat de headers altijd in beeld zijn, als een vast header-effect, zodat gebruikers de context niet verliezen als ze door de kolommen met gegevens scrollen. Een ding om op te merken is dat deze techniek resulteert in een discrepantie van de visuele en bron volgorde, en dit maakt dingen enigszins onintuïtief.
Sprinkle On Some JavaScript
Zoals eerder vermeld, lay-out opties die het morphen van de tabel door het wijzigen van display waarden hebben soms negatieve implicaties voor de toegankelijkheid, die een aantal kleine DOM manipulatie nodig om te corrigeren.
Daarnaast geeft Andrew Coyle een aantal tips voor de gebruikerservaring bij het ontwerpen van gegevenstabellen, waaronder functies als pagineren, sorteren, filteren, enzovoort (functies die wel wat JavaScript vereisen om in te schakelen).
Als u met een relatief eenvoudigere dataset werkt, wilt u misschien uw eigen functies schrijven voor sommige van deze functies.
Rijen naar blokken, met toegankelijkheidsfix
Voor zover ik weet, is deze responsieve gegevenstabeltechniek afkomstig uit het CSS-Tricks artikel “Responsive Data Tables” van Chris Coyier uit 2011. Het is sindsdien aangepast en uitgebreid door vele anderen.
De essentie van deze techniek is om gebruik te maken van een media query om de display-eigenschap van het tabelelement en zijn kinderen te schakelen naar block op een smalle viewport.
Op een smal scherm zijn de tabelkoppen visueel verborgen, maar ze bestaan nog wel in de toegankelijkheidsstructuur. Door gegevensattributen toe te passen op de tabelcellen, kunnen we vervolgens labels voor de gegevens weergeven via CSS, terwijl de inhoud van het label in de HTML blijft staan. Zie de CodePen hieronder voor hoe de mark-up en stijlen eruit zien:
Zie de Pen Tabel #2: Rijen naar blokken door Chen Hui Jing op CodePen.
De oorspronkelijke methode past een breedte toe op het pseudo-element dat de labeltekst weergeeft, maar dat betekent dat je moet weten hoeveel ruimte je label nodig heeft om mee te beginnen. In het bovenstaande voorbeeld wordt een iets andere benadering gebruikt, waarbij het etiket en de gegevens elk aan weerszijden van hun omhullende blok staan.
Een dergelijk effect kunnen we bereiken via auto-marges in een flex-opmaakcontext. Als we de display-eigenschap voor elk <td>-element op flex zetten, omdat pseudo-elementen vakken genereren alsof ze directe kinderen zijn van hun oorspronkelijke element, worden ze flex-kinderen van de <td>.
Daarna is het een kwestie van margin-right: auto op het pseudo-element in te stellen om de inhoud van de cel naar de uiterste rand van de cel te duwen.
Een andere benadering om de smalle viewport-layout te doen, is het gebruik van een combinatie van Grid en display: contents. Houd er rekening mee dat display: contents in ondersteunende browsers op dit moment problemen heeft met toegankelijkheid, en deze methode zou niet in productie moeten worden gebruikt totdat deze bugs zijn opgelost.
Maar misschien lees je dit nadat deze bugs zijn opgelost, in dat geval, hier is een alternatieve lay-out optie.
Zie de pentabel #2: Rijen naar blokken (alt) door Chen Hui Jing op CodePen.
Elk <tr>-element wordt ingesteld op display: grid, en elk <td>-element wordt ingesteld op display: contents. Alleen de onmiddellijke kinderen van een rastercontainer nemen deel aan een rasteropmaakcontext; in dit geval is dat het <td>-element.
Wanneer display: contents wordt toegepast op de <td>, wordt deze “vervangen” door de inhoud ervan, in dit geval worden het pseudo-element en de <span> binnen de <td> in plaats daarvan de rasterkinderen.
Wat ik leuk vind aan deze aanpak is de mogelijkheid om max-content te gebruiken om de kolom van pseudo-elementen te vergroten, zodat de kolom altijd de breedte van het langste label heeft, zonder dat we er handmatig een breedte-waarde aan hoeven toe te kennen.
In de toekomst, wanneer de sizing waarden van min-content, max-content en fit-content (gedekt door de CSS Intrinsic & Extrinsic Sizing Module Level 3) worden ondersteund als algemene width en height waarden, zullen we nog meer opties hebben om dingen op te maken.
Het nadeel van deze aanpak is dat je die extra <span> of <p> rond de inhoud in je tabelcel nodig hebt als die er nog geen had, anders zou er geen manier zijn om er stijlen op toe te passen.
Eenvoudige Paginatie
Dit voorbeeld toont een basis implementatie van paginatie die door Gjore Milevski van deze CodePen is aangepast om te pagineren op tabel rijen in plaats van divs. Het is een uitbreiding van het voorbeeld “style the scroll” dat in de vorige sectie is besproken.
Zie de Pen Tabel #4: Eenvoudige paginering door Chen Hui Jing op CodePen.
Vanuit een lay-outperspectief komt Flexbox erg van pas voor het positioneren van de pagineringselementen over verschillende viewport-groottes. Verschillende projectontwerpen zullen verschillende vereisten hebben, maar de veelzijdigheid van Flexbox zou u in staat moeten stellen om dienovereenkomstig rekening te houden met deze verschillen.
In dit geval is de paginering gecentreerd op de pagina en boven de tabel. De bedieningselementen om achteruit en vooruit te navigeren worden op bredere schermen aan weerszijden van de pagina-indicatoren geplaatst, maar op smalle schermen verschijnen ze alle vier boven de pagina-indicatoren.
Dit kunnen we doen door de eigenschap order te levaragen. Visuele herschikking van inhoud moet altijd zorgvuldig gebeuren, omdat deze eigenschap de volgorde van de bron niet verandert – alleen hoe deze op schermen verschijnt.
Eenvoudige sortering
Dit voorbeeld toont een basissorteringsimplementatie die is aangepast van dit codefragment van Peter Noble om zowel tekst als cijfers te kunnen verwerken:
Zie de Pen #Tabel 5: Eenvoudige sortering door Chen Hui Jing op CodePen.
Het zou nuttig zijn om een soort indicator te hebben van welke kolom momenteel wordt gesorteerd en in welke volgorde. We kunnen dat doen door CSS-klassen toe te voegen, die vervolgens kunnen worden vormgegeven zoals u wilt. In dit geval zijn de indicator-symbolen pseudo-elementen die worden ingeschakeld wanneer op de target header wordt geklikt.
Simple Search
Dit voorbeeld is een basis filter-functionaliteit die door alle tekstuele inhoud van elke tabelcel gaat en een CSS-klasse toepast om alle rijen te verbergen die niet overeenkomen met het zoek-invoerveld.
Zie de pentabel #6: Eenvoudig filteren door Chen Hui Jing op CodePen.
Zo’n implementatie is relatief naïef, en als uw gebruikscasus erom vraagt, kan het zinvol zijn om in plaats daarvan per kolom te zoeken. In dat geval is het wellicht een goed idee om elk invoerveld als onderdeel van de tabel in hun respectieve kolommen op te nemen.
Lets A Library Handle It
De bovenstaande JavaScript-fragmenten dienen om te laten zien hoe tabellen met grotere hoeveelheden gegevens kunnen worden verbeterd om het leven van de gebruikers van die tabellen te vergemakkelijken. Maar met echt grote datasets is het waarschijnlijk zinvol om een bestaande bibliotheek te gebruiken om je grote tabellen te beheren.
Het kolomomschakelpatroon is er een waarbij niet-essentiële kolommen op kleinere schermen worden verborgen. Normaal gesproken ben ik geen fan van het verbergen van inhoud alleen maar omdat de viewport smal is, maar deze aanpak van Maggie Costello Wachs van Filament Group lost dat bezwaar van mij op door een drop-down menu te bieden waarmee gebruikers de verborgen kolommen weer in beeld kunnen brengen.
Het bovenstaande artikel is gepubliceerd in 2011, maar Filament Group heeft sindsdien een volledige suite van responsieve tabelplugins ontwikkeld, bekend als Tablesaw, met functies zoals sorteren, rijselectie, internationalisatie, enzovoort.
De kolomomschakelingsfunctie in TableSaw is ook niet langer afhankelijk van jQuery, in tegenstelling tot de voorbeelden uit het oorspronkelijke artikel. Tablesaw is een van de weinige bibliotheken die ik kon vinden die op dit moment niet afhankelijk is van jQuery.
Wrapping Up
Er is een ontelbaar aantal tabel ontwerppatronen die er zijn, en welke aanpak je kiest hangt sterk af van het type gegevens dat je hebt en de doelgroep voor die gegevens. Uiteindelijk zijn tabellen een methode voor de organisatie en presentatie van gegevens. Het is belangrijk om uit te zoeken welke informatie het belangrijkst is voor je gebruikers en een aanpak te kiezen die het best beantwoordt aan hun behoeften.
Verder lezen
- “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)