Veebisisu ja koopiate hea korraldamine avaldab kasutajatele suuremat mõju. Lugejad saavad läbi vaadata suure hulga teavet ja sellest hõlpsasti aru saada.

Andmetabelite kasutamine on suurepärane viis andmete, eriti suurte teabekogumite korraldamiseks.

Andmetabelid on head kasutajaliidese kujunduselemendid, mis pakuvad struktuuri paljudele veebiandmetele. See võimaldab kasutajatel olulist teavet skannida, filtreerida, analüüsida ja sellega seoses meetmeid võtta.

Siin on mõned suurepärased andmetabelite näited, et anda rohkem ideid selle kohta, kuidas veebisaitidel andmetabeleid kasutada. Samuti on näpunäiteid selle kujundamiseks.

Andmetabelite levinumad kasutusviisid

Andmetabelil on palju funktsioone, kuid tavaliselt kasutatakse seda:

Korraldage andmed, et neid oleks lihtsam lugeda ja neid oleks meeldiv vaadata.
Sorteerige erinevat tüüpi ja koguseid teavet, sealhulgas fikseeritud ja dünaamilisi andmeid.
Tehke võrdlusi selle diagrammilaadse paigutuse tõttu. Sageli kasutatakse toodete ja teenuste võrdlemiseks ning isegi hinnaplaanide võrdlemiseks.

Näpunäiteid andmetabelite kujundamiseks

Koostage mitme funktsiooniga tabel.

Andmetabel peaks aitama kasutajatel teavet skannida ja mõista. Samuti peaks see võimaldama neil analüüsida, võrrelda ja vastavaid toiminguid teha.

Ankurdage kerimisel kontekstuaalne sisu.

See on kasulik suurte andmehulkade sortimisel ja nende vaatamisel väiksematel ekraanidel. See aitab kasutajatel loetavatest andmetest aru saada.

Eelistage ühiseid tegevusi.

Andmetabel peaks aitama kasutajatel aega ja vaeva säästa. See võimaldab neil lõpetada levinud toiminguid ja korduvaid ülesandeid ilma teisele veebilehele navigeerimata.

Luba andmefiltrid.

Filtrid wpDataTablesiga loodud toodete võrdlustabelist

Kasutajatel andmetega manipuleerimise ja filtreerimise võimaldamine aitab neil vajalikku teavet leida. Samuti õpivad nad uusi teadmisi ja saavad andmeid võrrelda.

Kasutage suurte andmehulkade jaoks horisontaalset kerimise valikut.

Horisontaalne kerimine töötab hästi andmetabelitel, kus on palju teavet ja veerge. Kasutajatel võib olla ka võimalus andmete paremaks võrdlemiseks teatud veerud ankurdada.

Pange pikkade tabelite jaoks lehekülgede arv.

Lehekülje näidis tabelis, mis on loodud rakendusega wpDataTables

Vältige pikki andmetabeleid, jagades need mitmeks kindla ridade arvu ja lehekülgede arvuga leheküljeks. Lubage kasutajatel kohandada ka igal lehel kuvatavate ridade arvu.

Lehekülgede lisamine näitab, millisel lehel need on, et hõlbustada navigeerimist.

Tee tabeliread laiendatavaks.

Teine hulgiandmeid sisaldavate tabelite kujunduslahendus on tabeli ridade laiendamine. Laiendatavad või kokkupandavad read võimaldavad kasutajatel lugeda lisateavet, säilitades samas tabeli konteksti.

Kasutage kohandatavaid veerge.

Need võimaldavad kasutajatel veebisisuga manipuleerida ja valida konkreetse ülesande jaoks vajalike andmete veerge. See parandab ka kasutajakogemust.

Samuti peaks kasutajatel olema võimalus luua ja salvestada veergude eelseadistus edaspidiseks kasutamiseks.

14 suurepärast näidet andmetabeli kasutajaliidese disainist

Kohanduv hinnakujundustabel

Sellel andmetabelil on puhas ja kaasaegne disain. See sobib suurepäraselt tellimuste hinnaplaanide esitamiseks .

See CSS3 tabel on tasuta ja hõlpsasti kasutatav. See on ka kohandatav.

Kasutajad saavad üldise välimuse parandamiseks muuta teksti ja värvi.

DataTablesi JSON-i näidis, kasutades materjalikujundust

See materjaliandmete tabel on ideaalne kujundus kontoriandmebaasi loomiseks. See sisaldab lehekülgede ja otsingu juhtelemente ning sellel on võimalus lisada rohkem profiile.

Andmetabel võimaldab kasutajatel ka järjestada ja sortida andmeid kasvavas ja kahanevas järjekorras.

Fikseeritud tabeli päis

Sellel Nikhil Krishnani CSS-i andmetabelil on fikseeritud päis, ääristeta veerud ja vertikaalne kerimise juhtelement.

Laual on puhas välispiir ja ankurdatud päis. See võimaldab kasutajatel tabelit alla kerides muutujaid vaadata.

Toitumisalaste faktide tabel HTML-is ja CSS-is

See näide näitab CSS-i andmetabelit, mis esitab toiduaine toitumisalased faktid. Välimus sarnaneb toote etiketile.

Kasutajad saavad andmetabelit kohandada vastavalt toidukauba toiteväärtusele. Selle täitmine võib aga veidi aega võtta.

Vastustav tabel

Sellel Geoff Yueni kujundatud andmetabelil on kaasaegne disain ja kohandatav värviskeem.

Sellel on laiendatavad read ja veerud. Nii et andmed mahuvad igasse lahtrisse, kui aken on tihendatud või venitatud.

Karge laud

Sellel CSS3 andmetabelil on hõljutusefekt, mis tõstab esile rea, millele kasutaja osutab. Ridadel on loetavuse parandamiseks vahelduvad värvid.

Sellel on ka lihtne disain ja puhas paigutus valgete veergude ääristega.

Kerimise stiil (pööratud päised)

See on suurepärane näide horisontaalse kerimisvalikuga andmetabelist .

Erinevalt teistest andmetabelitest on selle päis ankurdatud esimesse veergu. See aitab kasutajatel vältida andmeveergude kerimisel konteksti kaotamist.

Andmetabel on väga lihtsa kujundusega ja peale tekstide aktsepteerib see ka sisestust nagu emotikonid.

< Tabel > Vastupidav

<!– 📌📌📌 ORIGINAL_TEXT –

Vastutulelik –>

Sellel Pablo Garcia tundlikul disainil on 3D hõljumise efekt, kui kasutaja osutab lahtrile. Samuti tõstab see esile hõljuva lahtri rea.

Parema loetavuse tagamiseks on ridadel vahelduvad värvid. Andmetabelil on tume värvilahendus roosade aktsentidega, mis muudab selle ideaalseks futuristlike veebiteemade jaoks.

Hõljutusandmete tabelis tuhmumine ja hägustamine

Sellel Jack Rugile’i JavaScripti andmetabelil on hõljumisel tuhmumise ja hägususe efekt, kui kasutajad osutavad reale.

Efekt tõstab esile ja keskendub hõljutatud reale. See teeb seda ülejäänud read hägustamisega.

Andmetabel on lihtsa paigutusega ja halli värvilahendusega.

Tundlik ja juurdepääsetav andmetabel

Sellel andmetabelil on väga lihtne paigutus ja puhas disain, mis aitab andmetel silma paista.

Selle tabeliridadel on parema loetavuse tagamiseks vahelduvad valged ja hallid värvid. Päisel ja ääristel on selgelt eristatav roheline värv.

Tabelxeperementatsioon

Näide näitab võistluste ajakava, millel on hõljumisel suumimise efekt. Rida suureneb, kui kasutajad hõljutavad kursorit rea kohal, ja naaseb algsele kujule, kui kursor eemaldub.

CSS-i andmetabelis on ääristeta veerud laiema andmeruumi jaoks. Sellel on loetavuse tagamiseks ka vahelduvad reavärvid.

Materjalide disain – tundlik tabel

Sellel CSS3 andmetabelil on lihtne paigutus ja puhas valge kujundus. Need täiendavad värvi esiletõstmise hõljumisel efekti.

Sellel on tabelikonstruktori funktsioon. See võimaldab kasutajatel kohandada rea esiletõstmise värvi, lubada hõljutusefekti ja kuvada tabeli ääriseid.

Vähe veerge, palju ridu

See on lihtsa kujundusega andmetabel, mis töötab nii teksti- kui ka arvandmetel. Veerud on ääristeta ja tabeli ridadel on vahelduvad värvid.

Need, kes struktureerivad andmeid loendisse, võivad sellest kujundusest kasu saada.

Responstable 2.0: tundlik tabelilahendus

See andmetabel sisaldab valikunuppude veergu, mida saab kasutada vormide loomiseks.

Veerud on võrdse laiusega ja ridadel vahelduvad valged ja helesinised värvid. Päises on muutujate esiletõstmiseks selge sinakaspruun värv.

Mõtted nende suurepäraste andmetabelite näidete kohta

Andmetabeli kasutamine on suurepärane viis suurema osa veebisisu korraldamiseks. See mitte ainult ei paranda veebilehe visuaalset kujundust ja paigutust, vaid parandab ka kasutajakogemust.

Andmetabelid võimaldavad kasutajatel teavet skannida ja analüüsida.

Andmetabeli kujundamisel on oluline anda kasutajatele kontroll sisu üle. Kui lubate neil andmeid vastavalt nende vajadustele manipuleerida ja filtreerida, muutub tabel kasulikumaks.

Andmetabelite näited näitavad mitmesuguseid kujundusideid. Need aitavad teil luua oma veebisaidi jaoks andmetabeli.

Kui teile meeldis lugeda seda andmetabelite näidete artiklit, peaksite seda andmetabeli koostamise kohta lugema .

Kirjutasime ka mõnest seotud teemast, nagu hinnakujundustabelite näited, DataTablesi alternatiivid, JavaScripti tabeliteek , WordPressi tabelipluginad, kuidas WordPressis tabelit ilma pistikprogrammita luua, kuidas WordPressi tabelit lisada, WordPressi hinnatabeli pistikprogrammid ja kuidas WordPressis statistiliste tabelite loomiseks.

: wpdatatables.com