Bra organisation av webbinnehåll och kopiering ger mer effekt för användarna. Läsare kan skanna igenom massor av information och förstå den med lätthet.

Att använda datatabeller är ett utmärkt sätt att organisera data, särskilt stora uppsättningar information.

Datatabeller är bra UI-designelement som ger struktur åt massor av webbdata. Detta tillåter användare att skanna, filtrera, analysera och vidta åtgärder på viktig information.

För att ge fler idéer om hur man använder datatabeller på webbplatser, här är några bra exempel på datatabeller. Det finns även tips på hur man designar en.

Vanlig användning av datatabeller

En datatabell har många funktioner, men den används vanligtvis för att:

Organisera data för att göra det lättare att läsa och behagligt att titta på.
Sortera olika typer och mängder av information inklusive fasta och dynamiska data.
Gör jämförelser på grund av dess diagramliknande layout. Används ofta för att jämföra produkter och tjänster, och till och med prisplaner.

Tips om att designa datatabeller

Gör en tabell med flera funktioner.

En datatabell ska hjälpa användare att skanna och förstå information. Det bör också göra det möjligt för dem att analysera, jämföra och vidta motsvarande åtgärder.

Förankra kontextuellt innehåll när du rullar.

Detta är användbart när du sorterar stora uppsättningar data och visar dem på mindre skärmar. Det hjälper användarna att förstå data de läser.

Prioritera gemensamma åtgärder.

En datatabell ska hjälpa användare att spara tid och ansträngning. Det gör det genom att göra det möjligt för dem att slutföra vanliga åtgärder och repetitiva uppgifter utan att navigera till en annan webbsida.

Aktivera datafilter.

Filtrerar från en produktjämförelsetabell skapad med wpDataTables

Att tillåta användare att manipulera och filtrera data hjälper dem att hitta nödvändig information. De lär sig också nya insikter och kan jämföra data.

Använd ett horisontellt rullningsalternativ för stora uppsättningar data.

Horisontell rullning fungerar bra på datatabeller med massor av information och kolumner. Användare kan också ha ett alternativ att förankra vissa kolumner för bättre datajämförelse.

Sätt paginering för långbord.

Pagineringsexempel på en tabell skapad med wpDataTables

Undvik långa datatabeller genom att dela upp dem i flera sidor med ett fast antal rader och sidnumrering. Gör det möjligt för användare att också anpassa antalet rader som ska visas på varje sida.

Att sätta paginering indikerar vilken sida de är på för enkel navigering.

Gör tabellrader expanderbara.

En annan designlösning för tabeller som innehåller bulkdata är att göra tabellrader expanderbara. Expanderbara eller hopfällbara rader tillåter användare att läsa ytterligare information samtidigt som tabellkontexten bibehålls.

Använd anpassningsbara kolumner.

Dessa tillåter användare att manipulera webbinnehåll och välja specifika kolumner med data som de behöver för en uppgift. Det förbättrar också användarupplevelsen.

Användare bör också ha möjlighet att skapa och spara en förinställning av kolumner för framtida användning.

14 bra exempel på datatabells UI-design

Adaptiv pristabell

Denna datatabell har en ren och modern design. Det är perfekt för att presentera prisplaner för prenumerationer.

Detta CSS3-bord är gratis och lätt att använda. Den är också anpassningsbar.

Användare kan ändra text och färg för att förbättra det övergripande utseendet.

DataTables JSON-exempel med materialdesign

Denna materialdatatabell är en idealisk design för att skapa en kontorsdatabas. Den innehåller sidnumrering och sökkontroller och har en möjlighet att lägga till fler profiler.

Datatabellen gör det också möjligt för användare att ordna och sortera data i stigande och fallande ordning.

Fast tabellhuvud

Denna CSS-datatabell av Nikhil Krishnan har en fast rubrik, kantlösa kolumner och en vertikal rullningskontroll.

Bordet har en ren yttre kant och en förankrad rubrik. Detta tillåter användare att titta på variablerna medan de rullar ner i tabellen.

Näringsfaktatabell i HTML och CSS

Det här exemplet visar en CSS-datatabell som visar näringsfakta för ett livsmedel. Utseendet liknar det på en produktetikett.

Användare kan anpassa datatabellen efter näringsinnehållet i maten. Detta kan dock ta lite tid att fylla i.

Responsivt bord

Designad av Geoff Yuen, denna datatabell har en modern design och ett anpassningsbart färgschema.

Den har expanderbara rader och kolumner. Så data får plats i varje cell när fönstret antingen är komprimerat eller sträckt.

Skarpt bord

Denna CSS3-datatabell har en hovringseffekt som framhäver raden som användaren pekar på. Raderna har omväxlande färger för att förbättra läsbarheten.

Den har också en enkel design och ren layout med vita kolumnkanter.

Stila rullningen (vända rubriker)

Detta är ett bra exempel på en datatabell med ett horisontellt rullningsalternativ.

Till skillnad från andra datatabeller är dess rubrik förankrad i den första kolumnen. Detta hjälper användare att undvika att förlora sitt sammanhang när de rullar genom datakolumner.

Datatabellen har en mycket enkel design och förutom texter accepterar den också input som emojis.

< Tabell > Responsiv

<!– 📌📌📌 ORIGINAL_TEXT –

Responsiv –>

Denna lyhörda design av Pablo Garcia har en 3D-svävningseffekt när användaren pekar på en cell. Den framhäver också raden i den svävande cellen.

Raderna har omväxlande färger för bättre läsbarhet. Datatabellen har ett mörkt färgschema med rosa accenter vilket gör den idealisk för futuristiska webbteman.

Tona och oskärpa på Hover Data Table

Denna JavaScript-datatabell av Jack Rugile har en blekning och oskärpa vid svävningseffekt när användare pekar på en rad.

Effekten framhäver och ger mer fokus på den svävade raden. Den gör detta genom att sudda ut de återstående raderna.

Datatabellen har en enkel layout och ett grått färgschema.

Responsiv och tillgänglig datatabell

Denna datatabell har en mycket enkel layout och en ren design som hjälper data att sticka ut.

Dess bordsrader har omväxlande vita och grå färger för bättre läsbarhet. Rubriken och kanterna har en distinkt grön färg.

Tabelloperation

Exemplet visar en tävlingstidtabell som har en zoom på svävningseffekt. Raden skalas upp när användare håller muspekaren över raden och återgår till sin ursprungliga form när pekaren flyttas bort.

CSS-datatabellen har kantlösa kolumner för större datautrymme. Den har också alternerande radfärger för läsbarhet.

Materialdesign – Responsivt bord

Denna CSS3-datatabell har en enkel layout och en ren vit design. Dessa kompletterar färgmarkeringen vid svävningseffekten.

Den har en funktion för bordskonstruktion. Detta gör det möjligt för användare att anpassa färgen på radmarkeringen, aktivera hovringseffekten och visa tabellkanter.

Få kolumner, många rader

Detta är en datatabell med en enkel design som fungerar på både text och numerisk data. Kolumnerna är kantlösa och tabellraderna har omväxlande färger.

De som strukturerar data till en lista kan dra nytta av denna design.

Responstable 2.0: en responsiv bordslösning

Denna datatabell innehåller en kolumn med valknappar som kan användas för att skapa formulär.

Kolumnerna har lika bredd och raderna har omväxlande vita och ljusblå färger. Rubriken har en distinkt blågrön färg för att markera variabler.

Avslutande tankar om dessa fantastiska exempel på datatabeller

Att använda en datatabell är ett utmärkt sätt att organisera en stor del av webbinnehållet. Det förbättrar inte bara den visuella designen och layouten på en webbsida utan förbättrar också användarupplevelsen.

Datatabeller tillåter användare att skanna igenom information och hjälper dem att skapa en analys.

När man utformar en datatabell är det viktigt att ge användarna kontroll över innehållet. Att låta dem manipulera och filtrera data efter deras behov gör tabellen mer användbar.

Exemplen på datatabeller visar en rad designidéer. Dessa hjälper dig att skapa en datatabell för din webbplats.

Om du tyckte om att läsa den här artikeln om exempel på datatabeller, bör du kolla in den här om hur man gör en datatabell.

Vi skrev också om några relaterade ämnen som pristabellexempel, DataTables-alternativ, JavaScript -tabellbibliotek, WordPress-tabellplugins, hur man skapar en tabell i WordPress utan plugin, hur man infogar en tabell i WordPress, WordPress pristabellplugins och hur för att skapa statistiska tabeller i WordPress.

Inspelningskälla: wpdatatables.com