• Om författaren
• CSS-Only-alternativ
• Option 1: Gör ingenting
• Option 2: Style The Scroll
• Sprinkle On Some JavaScript
• Rows To Blocks, With Accessibility Fix
• Simpel paginering
• Enklare sortering
• Enklare sökning
• Låt ett bibliotek sköta det
• Wrapping Up
• Fortsatt läsning

Om författaren

Chen Hui Jing är en autodidakt designer och utvecklare med en överdriven kärlek för CSS. Att minska antalet rader kod i sina webbprojekt gör henne extremt glad. Hon …Mer omHuijing↬

Tabeller är ett designmönster för att visa stora mängder data i rader och kolumner, vilket gör dem effektiva för att göra jämförande analyser av kategoriska objekt. Tabeller har använts för detta ändamål så tidigt som på 200-talet och när världen började digitaliseras följde tabellerna med.

Det var oundvikligt att webben skulle stödja visning av data i tabellformat. HTML-tabeller presenterar tabelldata på ett semantiskt och strukturellt lämpligt sätt. Standardstilarna för HTML-tabeller är dock inte precis det mest estetiskt tilltalande du någonsin sett. Beroende på den önskade visuella utformningen krävs en viss ansträngning på CSS-fronten för att snygga till tabellerna. För tio år sedan publicerades en artikel med “Top 10 CSS Table Designs” på Smashing Magazine, och den fortsätter att få mycket trafik än i dag.

Nätet har utvecklats mycket under det senaste decenniet, och det är bekvämare än någonsin att göra så att din webbplats eller ditt program anpassar sig till den visningsfönster som den visas i. Med detta sagt måste vi fortsätta att göra genomtänkta designval som inte äventyrar tillgängligheten. Eftersom tabeller inte verkar falla i onåd inom en snar framtid, låt oss se hur tabeller kan skapas på webben 2019.

CSS-Only-alternativ

Om din datamängd inte är så stor, och funktioner som paginering och sortering inte är nödvändiga, kan du överväga ett JavaScript-fritt alternativ. Du kan få ganska fina resultat som fungerar bra på en hel rad olika skärmstorlekar utan den extra vikten av ett stort bibliotek.

Tyvärr, utan hjälp av JavaScript för viss DOM-manipulering på tillgänglighetsfronten, har vi bara en handfull CSS-alternativ. Men för små datamängder är de ofta tillräckliga.

Option 1: Gör ingenting

Vi ska börja med ett scenario med låg ansträngning. Om dina data ryms i en tabell med bara några få kolumner och många rader är en sådan tabell ganska mobilanpassad till att börja med.

Problemet som du skulle få är förmodligen att du har för mycket utrymme på bredare skärmar, så det kan vara tillrådligt att “sätta ett tak” på den maximala bredden på tabellen med en max-width och samtidigt låta den krympa efter behov på en smal skärm.

Den här sortens mönster fungerar bäst om data i sig självt inte är rader och rader av text. Om de är numeriska eller korta fraser kan du förmodligen komma undan med att inte göra så mycket.

Option 2: Style The Scroll

David Bushell skrev upp sin teknik för responsiva tabeller redan 2012, vilket innebar att han åberopade överflöde och lät användarna scrolla för att se mer data. Man skulle kunna hävda att detta inte direkt är en responsiv lösning, men tekniskt sett reagerar behållaren på visningsfönstrets bredd.

Låt oss först titta på det “grundläggande” överflödet. Föreställ dig att jag använder luftcitat runt basic, eftersom stylingen för de rullande skuggorna är allt annat än det. Men i det här fallet avser “basic” ändå det faktum att tabellen inte transformeras på något sätt.

Denna teknik för att göra rullande skuggor kommer från Roma Komarov och Lea Verou som har använt sig av varandras idéer för att skapa magi. Den bygger på att man använder flera gradienter (linjära och radiella) som bakgrundsbilder på det ingående elementet och att man använder background-attachment: local för att positionera bakgrunden i förhållande till dess innehåll.

Det fina med den här tekniken är att för webbläsare som inte har stöd för rullande skuggor kan du fortfarande rulla tabellen som vanligt. Det bryter inte alls mot layouten.

Ett annat rullningsalternativ skulle vara att vända tabellrubrikerna från en radkonfiguration till en kolumnkonfiguration, samtidigt som man tillämpar en horisontell rullning på <tbody>-elementets innehåll. Denna teknik utnyttjar Flexbox-beteendet för att omvandla tabellens rader till kolumner.

Då vi tillämpar display: flex på tabellen gör vi <thead> och <tbody> till båda flexbarn, som som standard läggs ut bredvid varandra på samma flexlinje.

Vi gör också <tbody>-elementet till en flexbehållare, vilket gör att alla <tr>-element inom det också blir flexbarn som läggs ut på en enda flexlinje. Slutligen måste varje tabellcell ha sin display inställd på block i stället för standardvärdet table-cell.

Fördelen med den här tekniken är att rubrikerna alltid är synliga, som en fast rubrikeffekt, så att användarna inte förlorar sammanhanget när de bläddrar genom datakolumnerna. En sak att notera är att den här tekniken resulterar i en diskrepans mellan den visuella och källordningen, vilket gör saker och ting något ointuitiva.

Sprinkle On Some JavaScript

Som tidigare nämnts har layoutalternativ som involverar morphing av tabellen genom att ändra display-värdena ibland negativa implikationer för tillgängligheten, vilket kräver lite mindre DOM-manipulationer för att rätta till.

Det finns dessutom ett antal tips om användarupplevelse när det gäller utformning av datatabeller från Andrew Coyle, inklusive funktioner som paginering, sortering, filtrering och så vidare (funktioner som kräver en del JavaScript för att aktiveras).

Om du arbetar med ett relativt enklare dataset kanske du vill skriva egna funktioner för några av dessa funktioner.

Rows To Blocks, With Accessibility Fix

Såvitt jag vet kom den här responsiva datatabellstekniken från CSS-Tricks-artikeln “Responsive Data Tables” av Chris Coyier redan 2011. Den har sedan dess anpassats och utökats av många andra.

Kärnan i den här tekniken är att använda sig av en media query för att ändra display-egenskapen för tabellelementet och dess barn till block på en smal viewport.

På en smal bildskärm döljs tabellrubrikerna visuellt, men de finns fortfarande kvar i tillgänglighetsträdet. Genom att tillämpa dataattribut på tabellcellerna kan vi sedan visa etiketter för data via CSS, samtidigt som vi behåller innehållet i etiketten i HTML. Se CodePen nedan för att se hur markeringen och stilarna ser ut:

Den ursprungliga metoden tillämpar en bredd på det pseudoelement som visar etiketttexten, men det innebär att du måste veta hur mycket utrymme din etikett behöver till att börja med. I exemplet ovan används ett något annorlunda tillvägagångssätt, där etikett och data står på varsin sida av det block som innehåller dem.

Vi kan uppnå en sådan effekt med hjälp av auto-marginaler i ett flex-formateringssammanhang. Om vi ställer in display-egenskapen för varje <td>-element till flex, eftersom pseudo-element genererar rutor som om de vore omedelbara barn till sitt ursprungselement, blir de flexbarn till <td>.

Därefter är det en fråga om att ställa in margin-right: auto på pseudo-elementet för att skjuta cellens innehåll till cellens yttersta kant.

Ett annat tillvägagångssätt för att åstadkomma en smal viewport-layout är att använda en kombination av Grid och display: contents. Observera att display: contents i webbläsare med stöd har problem med tillgängligheten för tillfället, och den här metoden bör inte användas i produktionen förrän dessa buggar har rättats till.

Men kanske läser du det här efter att dessa buggar har rättats till, i så fall har du här ett alternativt layoutalternativ.

Varje <tr>-element sätts till display: grid, och vart och ett <td>-element sätts till display: contents. Endast de omedelbara barnen till en rutnätsbehållare deltar i en rutnätsformateringskontext, i det här fallet är det <td>-elementet.

När display: contents tillämpas på <td> blir det “ersatt” av dess innehåll, i det här fallet blir pseudo-elementet och <span> inom <td> rutnätsbarnen i stället.

Vad jag gillar med det här tillvägagångssättet är möjligheten att använda max-content för att dimensionera kolumnen med pseudo-element, vilket säkerställer att kolumnen alltid kommer att vara lika bred som den längsta etiketten, utan att vi manuellt behöver tilldela ett breddvärde för den.

I framtiden, när storleksvärdena min-content, max-content och fit-content (som omfattas av CSS Intrinsic & Extrinsic Sizing Module Level 3) stöds som allmänna width och height värden, kommer vi att ha ännu fler alternativ för att lägga upp saker.

Nackdelen med det här tillvägagångssättet är att du behöver ytterligare <span> eller <p> runt innehållet i tabellcellen om det inte redan har det, annars finns det inget sätt att tillämpa stilar på det.

Simpel paginering

Det här exemplet visar en grundläggande pagineringsimplementation som modifierades från den här CodePen av Gjore Milevski för att paginera på tabellrader i stället för div:er. Det är en förlängning av exemplet “style the scroll” som diskuterades i föregående avsnitt.

Från ett layoutperspektiv är Flexbox mycket användbart för att placera pagineringselementen i olika viewportstorlekar. Olika projektdesigns kommer att ha olika krav, men Flexbox mångsidighet bör göra det möjligt för dig att tillgodose dessa skillnader i enlighet med detta.

I det här fallet är pagineringen centrerad på sidan och ovanför tabellen. Kontrollerna för att navigera bakåt och framåt är placerade på vardera sidan av sidindikatorerna på bredare skärmar, men alla fyra visas ovanför sidindikatorerna på smala skärmar.

Vi kan göra det här genom att levarera egenskapen order. Visuell omordning av innehåll bör alltid göras med hänsyn eftersom den här egenskapen inte ändrar källordningen – bara hur den visas på skärmar.

Enklare sortering

Det här exemplet visar en grundläggande sorteringsimplementation som modifierats från det här kodutdraget av Peter Noble för att hantera både text och siffror:

Det skulle vara användbart att ha någon form av indikator på vilken kolumn som för närvarande sorteras och i vilken ordning. Vi kan göra det med hjälp av CSS-klasser som sedan kan stylas som du vill. I det här fallet är indikatorsymbolerna pseudoelement som växlar när man klickar på målrubriken.

Enklare sökning

Det här exemplet är en grundläggande filtreringsfunktionalitet som itererar genom allt textinnehåll i varje tabellcell och tillämpar en CSS-klass för att dölja alla rader som inte matchar sökinmatningsfältet.

En sådan implementering är relativt naiv, och om ditt användningsfall kräver det kan det vara vettigt att söka per kolumn istället. I det scenariot kan det vara en bra idé att ha varje inmatningsfält som en del av tabellen i sina respektive kolumner.

Låt ett bibliotek sköta det

Ovanstående JavaScript-utdrag tjänar till att demonstrera hur tabeller med större datamängder kan förbättras för att göra livet enklare för användare av dessa tabeller. Men när det gäller riktigt stora datamängder kan det nog vara vettigt att använda ett befintligt bibliotek för att hantera dina stora tabeller.

Mönstret för att växla mellan kolumner är ett mönster där icke väsentliga kolumner döljs på mindre skärmar. Normalt sett är jag inget fan av att dölja innehåll bara för att visningsfönstret är smalt, men det här tillvägagångssättet av Maggie Costello Wachs från Filament Group löser detta problem genom att tillhandahålla en rullgardinsmeny som gör det möjligt för användarna att växla de dolda kolumnerna tillbaka till visningen.

Ovanstående artikel publicerades redan 2011, men Filament Group har sedan dess utvecklat en komplett svit av responsiva tabellplugins som kallas Tablesaw, som innehåller funktioner som sortering, radval, internationalisering och så vidare.

Spalternas växlingsfunktion i TableSaw är inte heller längre beroende av jQuery, till skillnad från exemplen från den ursprungliga artikeln. Tablesaw är ett av de enda biblioteken jag kunde hitta som inte har ett beroende av jQuery för tillfället.

Wrapping Up

Det finns en myriad av designmönster för tabeller där ute, och vilket tillvägagångssätt du väljer beror i hög grad på vilken typ av data du har och målgruppen för dessa data. I slutändan är tabeller en metod för att organisera och presentera data. Det är viktigt att ta reda på vilken information som är viktigast för dina användare och välja ett tillvägagångssätt som bäst tillgodoser deras behov.

Fortsatt läsning

• “CSS-Only Responsive Tables”, David Bushell
• “Accessible, Simple, Responsive Tables”, Davide Rizzo, CSS-Tricks
• “Responsive Table Layout”, Matt Smith
• “Responsive Patterns”: Tabeller,” Brad Frost
• “Det är fortfarande okej att använda tabeller,” Adrian Roselli
• “Tabeller, CSS Display Properties, And ARIA,” Adrian Roselli
• “Data Tables,” Heydon Pickering

(ra, il)