{"id":227734,"date":"2022-09-22T13:36:00","date_gmt":"2022-09-22T10:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227734"},"modified":"2022-11-09T00:52:57","modified_gmt":"2022-11-08T21:52:57","slug":"upeita-esimerkkejae-verkkosivustoilla-esitellyistae-tietotaulukoista","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/upeita-esimerkkejae-verkkosivustoilla-esitellyistae-tietotaulukoista\/","title":{"rendered":"Upeita esimerkkej\u00e4 verkkosivustoilla esitellyist\u00e4 tietotaulukoista"},"content":{"rendered":"\n<p>Digitaalista tietoa ja dataa on eri tyyppej\u00e4 ja suhteita. Niiden j\u00e4rjest\u00e4minen vaatii erityist\u00e4 taitoa.<\/p>\n<p>Verkkosis\u00e4ll\u00f6n ja -kopion hyv\u00e4 organisointi tuo enemm\u00e4n vaikuttavuutta k\u00e4ytt\u00e4jiin. Lukijat voivat selata paljon tietoa ja ymm\u00e4rt\u00e4\u00e4 sen helposti.<\/p>\n<p>Tietotaulukoiden k\u00e4ytt\u00f6 on loistava tapa j\u00e4rjest\u00e4\u00e4 tietoja, erityisesti suuria tietojoukkoja.<\/p>\n<p>Tietotaulukot ovat hyvi\u00e4 k\u00e4ytt\u00f6liittym\u00e4n suunnitteluelementtej\u00e4, jotka tarjoavat rakenteen verkkotiedoille. N\u00e4in k\u00e4ytt\u00e4j\u00e4t voivat skannata, suodattaa, analysoida t\u00e4rkeit\u00e4 tietoja ja ryhty\u00e4 toimiin.<\/p>\n<p>Saadaksesi lis\u00e4\u00e4 ideoita tietotaulukoiden hy\u00f6dynt\u00e4miseen verkkosivustoilla, t\u00e4ss\u00e4 on joitain hienoja esimerkkej\u00e4 tietotaulukoista. Siell\u00e4 on my\u00f6s vinkkej\u00e4 sellaisen suunnitteluun.<\/p>\n<h2>Tietotaulukoiden yleiset k\u00e4ytt\u00f6tavat<\/h2>\n<p>Tietotaulukossa on monia toimintoja, mutta sit\u00e4 k\u00e4ytet\u00e4\u00e4n yleisesti:<\/p>\n<ul>\n<li><strong>J\u00e4rjest\u00e4 tiedot<\/strong>, jotta niit\u00e4 on helpompi lukea ja katsella.<\/li>\n<li><strong>Lajittele erityyppisi\u00e4 ja -m\u00e4\u00e4ri\u00e4,<\/strong> mukaan lukien kiinte\u00e4t ja dynaamiset tiedot.<\/li>\n<li><strong>Tee vertailuja<\/strong> sen kaaviomaisen asettelun vuoksi. K\u00e4ytet\u00e4\u00e4n usein tuotteiden ja palveluiden vertailuun ja jopa hinnoittelusuunnitelmiin.<\/li>\n<\/ul>\n<h2>Vinkkej\u00e4 tietotaulukoiden suunnitteluun<\/h2>\n<h3>Tee taulukko, jossa on useita toimintoja.<\/h3>\n<p><a href=\"https:\/\/dribbble.com\/shots\/9641301-Contacts-management-page\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-185663-61e8883038f02.jpg\" alt=\"Upeita esimerkkej\u00e4 verkkosivustoilla esitellyist\u00e4 tietotaulukoista\" \/><\/a><\/p>\n<p>Tietotaulukon pit\u00e4isi auttaa k\u00e4ytt\u00e4ji\u00e4 skannaamaan ja ymm\u00e4rt\u00e4m\u00e4\u00e4n tietoja. Sen pit\u00e4isi my\u00f6s antaa heille mahdollisuus analysoida, vertailla ja ryhty\u00e4 vastaaviin toimiin.<\/p>\n<h3>Kiinnit\u00e4 asiayhteyteen liittyv\u00e4 sis\u00e4lt\u00f6 vieritt\u00e4ess\u00e4si.<\/h3>\n<p>T\u00e4st\u00e4 on hy\u00f6ty\u00e4, kun lajitellaan suuria tietojoukkoja ja katsotaan niit\u00e4 pienemmill\u00e4 n\u00e4yt\u00f6ill\u00e4. Se auttaa k\u00e4ytt\u00e4ji\u00e4 ymm\u00e4rt\u00e4m\u00e4\u00e4n lukemaansa dataa.<\/p>\n<h3>Priorisoi yhteiset toimet.<\/h3>\n<p><a href=\"https:\/\/dribbble.com\/shots\/14115451-BackMarket-s-Data-Table-Darkmode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-185663-61e888314311e.jpg\" alt=\"Upeita esimerkkej\u00e4 verkkosivustoilla esitellyist\u00e4 tietotaulukoista\" \/><\/a><\/p>\n<p>Tietotaulukon pit\u00e4isi auttaa k\u00e4ytt\u00e4ji\u00e4 s\u00e4\u00e4st\u00e4m\u00e4\u00e4n aikaa ja vaivaa. Se tekee t\u00e4m\u00e4n antamalla heille mahdollisuuden suorittaa yleisi\u00e4 toimintoja ja toistuvia teht\u00e4vi\u00e4 siirtym\u00e4tt\u00e4 toiselle verkkosivulle.<\/p>\n<h3>Ota tietosuodattimet k\u00e4ytt\u00f6\u00f6n.<\/h3>\n<p><a href=\"https:\/\/wpdatatables.com\/documentation\/table-examples\/products-table\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-185663-61e888324c5f3.jpg\" alt=\"Upeita esimerkkej\u00e4 verkkosivustoilla esitellyist\u00e4 tietotaulukoista\" \/><\/a><\/p>\n<p>Suodattimet <a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wpDataTablesilla luodusta tuotevertailutaulukosta<\/a><\/p>\n<p>Antamalla k\u00e4ytt\u00e4jien k\u00e4sitell\u00e4 ja suodattaa tietoja auttaa heit\u00e4 l\u00f6yt\u00e4m\u00e4\u00e4n tarvittavat tiedot. He oppivat my\u00f6s uusia oivalluksia ja voivat vertailla tietoja.<\/p>\n<h3>K\u00e4yt\u00e4 vaakasuuntaista vieritysvaihtoehtoa suurille tietosarjoille.<\/h3>\n<p><a href=\"https:\/\/dribbble.com\/shots\/11318664-Data-Table-for-Project-Managers-CEO-Leads\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-185663-61e888333a036.jpg\" alt=\"Upeita esimerkkej\u00e4 verkkosivustoilla esitellyist\u00e4 tietotaulukoista\" \/><\/a><\/p>\n<p>Vaakasuora vieritys toimii hyvin tietotaulukoissa, joissa on paljon tietoa ja sarakkeita. K\u00e4ytt\u00e4jill\u00e4 voi my\u00f6s olla mahdollisuus ankkuroida tiettyj\u00e4 sarakkeita tietojen vertailun parantamiseksi.<\/p>\n<h3>Laita pitkien taulukoiden sivutus.<\/h3>\n<p><a href=\"https:\/\/wpdatatables.com\/documentation\/table-examples\/catalog-of-drivers\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-185663-61e888343a7ec.jpg\" alt=\"Upeita esimerkkej\u00e4 verkkosivustoilla esitellyist\u00e4 tietotaulukoista\" \/><\/a><\/p>\n<p><a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sivutusesimerkki wpDataTablesilla luodussa<\/a> taulukossa<a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>V\u00e4lt\u00e4 pitki\u00e4 tietotaulukoita jakamalla ne useille sivuille, joissa on kiinte\u00e4 m\u00e4\u00e4r\u00e4 rivej\u00e4 ja sivutus. Anna k\u00e4ytt\u00e4jien my\u00f6s muokata kullakin sivulla n\u00e4ytett\u00e4vien rivien m\u00e4\u00e4r\u00e4\u00e4.<\/p>\n<p>Sivutus osoittaa, mill\u00e4 sivulla ne ovat navigoinnin helpottamiseksi.<\/p>\n<h3>Tee taulukon riveist\u00e4 laajennettavia.<\/h3>\n<p><a href=\"https:\/\/dribbble.com\/shots\/14123404-DataTable\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-185663-61e8883532154.jpg\" alt=\"Upeita esimerkkej\u00e4 verkkosivustoilla esitellyist\u00e4 tietotaulukoista\" \/><\/a><\/p>\n<p>Toinen suunnitteluratkaisu joukkotietoja sis\u00e4lt\u00e4ville taulukoille on tehd\u00e4 taulukon riveist\u00e4 laajennettavia. Laajennettavien tai tiivistett\u00e4vien rivien avulla k\u00e4ytt\u00e4j\u00e4t voivat lukea lis\u00e4tietoja s\u00e4ilytt\u00e4en samalla taulukon kontekstin.<\/p>\n<h3>K\u00e4yt\u00e4 muokattavia sarakkeita.<\/h3>\n<p>Niiden avulla k\u00e4ytt\u00e4j\u00e4t voivat k\u00e4sitell\u00e4 verkkosis\u00e4lt\u00f6\u00e4 ja valita tiettyj\u00e4 tietosarakkeita, joita he tarvitsevat teht\u00e4v\u00e4\u00e4n. Se parantaa my\u00f6s k\u00e4ytt\u00f6kokemusta.<\/p>\n<p>K\u00e4ytt\u00e4jill\u00e4 tulisi my\u00f6s olla mahdollisuus luoda ja tallentaa esiasetus sarakkeista tulevaa k\u00e4ytt\u00f6\u00e4 varten.<\/p>\n<h2>14 erinomaista esimerkki\u00e4 tietotaulukon k\u00e4ytt\u00f6liittym\u00e4suunnittelusta<\/h2>\n<h3>Mukautuva hinnoittelutaulukko<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/VoloshchenkoAl\/embed\/NABNoN\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4ll\u00e4 tietotaulukolla on puhdas ja moderni muotoilu. Se sopii erinomaisesti tilausten <strong>hinnoittelusuunnitelmien esitt\u00e4miseen.<\/strong><\/p>\n<p>T\u00e4m\u00e4 CSS3-p\u00f6yt\u00e4 on ilmainen ja helppok\u00e4ytt\u00f6inen. Se on my\u00f6s <strong>muokattavissa<\/strong>.<\/p>\n<p>K\u00e4ytt\u00e4j\u00e4t voivat muuttaa teksti\u00e4 ja v\u00e4rej\u00e4 parantaakseen yleisilmett\u00e4.<\/p>\n<h3>DataTables JSON -n\u00e4yte Material Designia k\u00e4ytt\u00e4m\u00e4ll\u00e4<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/heiswayi\/embed\/VvpmaE\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4m\u00e4 materiaalitietotaulukko on ihanteellinen malli <strong>toimistotietokannan luomiseen<\/strong>. Se sis\u00e4lt\u00e4\u00e4 sivutus &#8211; ja <strong>hakus\u00e4\u00e4timet<\/strong><strong>,<\/strong> ja siin\u00e4 <strong>on mahdollisuus lis\u00e4t\u00e4 lis\u00e4\u00e4 profiileja<\/strong>.<\/p>\n<p>Tietotaulukon avulla k\u00e4ytt\u00e4j\u00e4t voivat my\u00f6s j\u00e4rjest\u00e4\u00e4 ja lajitella tiedot <strong>nousevaan ja laskevaan j\u00e4rjestykseen<\/strong>.<\/p>\n<h3>Kiinte\u00e4 taulukon otsikko<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/nikhil8krishnan\/embed\/WvYPvv\" frameborder=\"0\"><\/iframe><\/div>\n<p><strong>T\u00e4ss\u00e4 Nikhil Krishnanin<\/strong> CSS-tietotaulukossa on <strong>kiinte\u00e4 otsikko<\/strong>, <strong>reunattomat sarakkeet<\/strong> ja <strong>pystysuuntainen vieritysohjain<\/strong>.<\/p>\n<p>P\u00f6yd\u00e4ss\u00e4 on puhdas ulkoreuna ja ankkuroitu otsikko. T\u00e4m\u00e4n ansiosta k\u00e4ytt\u00e4j\u00e4t voivat tarkastella muuttujia vieritt\u00e4ess\u00e4\u00e4n taulukkoa alasp\u00e4in.<\/p>\n<h3>Ravitsemustietotaulukko HTML- ja CSS-muodossa<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/chriscoyier\/embed\/egHEK\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4m\u00e4 esimerkki n\u00e4ytt\u00e4\u00e4 CSS-tietotaulukon, joka esitt\u00e4\u00e4 elintarvikkeen <strong>ravitsemustiedot<\/strong>. Ulkon\u00e4k\u00f6 on samanlainen kuin <strong>tuoteetiketiss\u00e4<\/strong>.<\/p>\n<p>K\u00e4ytt\u00e4j\u00e4t voivat muokata tietotaulukkoa elintarvikkeen ravintosis\u00e4ll\u00f6n mukaan. T\u00e4m\u00e4n t\u00e4ytt\u00e4minen voi kuitenkin kest\u00e4\u00e4 jonkin aikaa.<\/p>\n<h3>Responsiivinen taulukko<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/geoffyuen\/embed\/FCBEg\" frameborder=\"0\"><\/iframe><\/div>\n<p><strong>Geoff Yuenin<\/strong> suunnittelemassa datataulukossa on moderni muotoilu ja <strong>muokattava v\u00e4rimaailma<\/strong>.<\/p>\n<p>Siin\u00e4 on <strong>laajennettavia rivej\u00e4 ja sarakkeita.<\/strong> Joten tiedot mahtuvat jokaiseen soluun, kun ikkuna on joko pakattu tai venytetty.<\/p>\n<h3>Raikas p\u00f6yt\u00e4<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/stursby\/embed\/HdiJh\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4ss\u00e4 CSS3-tietotaulukossa on <strong>hover-tehoste<\/strong>, joka korostaa rivin, johon k\u00e4ytt\u00e4j\u00e4 osoittaa. Riveill\u00e4 on <strong>vuorottelevat v\u00e4rit<\/strong> <strong>luettavuuden<\/strong> parantamiseksi .<\/p>\n<p>Siin\u00e4 on my\u00f6s yksinkertainen muotoilu ja selke\u00e4 asettelu valkoisilla sarakkeiden reunoilla.<\/p>\n<h3>Vierityksen tyylin muuttaminen (k\u00e4\u00e4nnetyt otsikot)<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/smashing-magazine\/embed\/PVGZEQ\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4m\u00e4 on loistava esimerkki tietotaulukosta, jossa on <strong>vaakasuuntainen vieritysvaihtoehto<\/strong>.<\/p>\n<p>Toisin kuin muut tietotaulukot, sen <strong>otsikko on ankkuroitu ensimm\u00e4iseen sarakkeeseen.<\/strong> T\u00e4m\u00e4 auttaa k\u00e4ytt\u00e4ji\u00e4 v\u00e4ltt\u00e4m\u00e4\u00e4n kontekstin menett\u00e4misen datasarakkeita selatessaan.<\/p>\n<p>Tietotaulukon muotoilu on hyvin yksinkertainen, ja se hyv\u00e4ksyy tekstien lis\u00e4ksi my\u00f6s sy\u00f6tteit\u00e4, kuten <strong>hymi\u00f6it\u00e4<\/strong>.<\/p>\n<h3>&lt; Taulukko &gt; Responsiivinen<\/h3>\n<p>&lt;!\u2013 \ud83d\udccc\ud83d\udccc\ud83d\udccc ORIGINAL_TEXT \u2013<\/p>\n<p>Responsiivinen -&gt;<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/pablorgarcia\/embed\/qdIsm\" frameborder=\"0\"><\/iframe><\/div>\n<p><strong>T\u00e4ss\u00e4 Pablo Garcian<\/strong> responsiivisessa suunnittelussa on <strong>3D-hover-efekti,<\/strong> kun k\u00e4ytt\u00e4j\u00e4 osoittaa solua. Se korostaa my\u00f6s leijuttavan solun rivin.<\/p>\n<p>Riveill\u00e4 on vuorottelevat v\u00e4rit parempaa luettavuutta varten. Tietotaulukossa on tumma v\u00e4rimaailma ja vaaleanpunaisia \u200b\u200baksentteja, mik\u00e4 tekee siit\u00e4 ihanteellisen <strong>futuristisille verkkoteemoille<\/strong>.<\/p>\n<h3>H\u00e4ivyt\u00e4 ja sumenna hover-tietotaulukossa<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/jackrugile\/embed\/EyABe\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4ss\u00e4 <strong>Jack Rugilen<\/strong> JavaScript-tietotaulukossa on <strong>h\u00e4ivytys- ja sumennustehoste,<\/strong> kun k\u00e4ytt\u00e4j\u00e4t osoittavat rivi\u00e4.<\/p>\n<p>Tehoste korostaa ja <strong>keskittyy enemm\u00e4n<\/strong> leijutetulla rivill\u00e4. Se tekee t\u00e4m\u00e4n sumentamalla loput rivit.<\/p>\n<p>Tietotaulukossa on yksinkertainen asettelu ja harmaa v\u00e4rimaailma.<\/p>\n<h3>Responsiivinen ja helppok\u00e4ytt\u00f6inen tietotaulukko<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/pixelchar\/embed\/rfuqK\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4ll\u00e4 tietotaulukolla on hyvin yksinkertainen asettelu ja selke\u00e4 muotoilu, joka <strong>auttaa tiedot erottumaan joukosta<\/strong>.<\/p>\n<p>Sen taulukon riveill\u00e4 on vuorotellen valkoinen ja harmaa v\u00e4ri luettavuuden parantamiseksi. Otsikossa ja reunuksissa on selke\u00e4 vihre\u00e4 v\u00e4ri.<\/p>\n<h3>Taulukkoperimentointi<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/iambeccagould\/embed\/tbwjh\" frameborder=\"0\"><\/iframe><\/div>\n<p>Esimerkki n\u00e4ytt\u00e4\u00e4 kilpailuaikataulun, jossa on <strong>zoomaus hover -tehoste<\/strong>. Rivi <strong>skaalautuu,<\/strong> kun k\u00e4ytt\u00e4j\u00e4t viev\u00e4t hiiren osoittimen rivin p\u00e4\u00e4lle, ja palaa alkuper\u00e4iseen muotoonsa, kun osoitin siirtyy poisp\u00e4in.<\/p>\n<p>CSS-tietotaulukossa on reunattomia sarakkeita <strong>laajempaa tietotilaa varten.<\/strong> Siin\u00e4 on my\u00f6s vuorottelevat riviv\u00e4rit luettavuuden parantamiseksi.<\/p>\n<h3>Materiaalisuunnittelu \u2013 Responsiivinen taulukko<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/zavoloklom\/embed\/IGkDz\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4ss\u00e4 CSS3-tietotaulukossa on yksinkertainen asettelu ja puhtaan valkoinen muotoilu. N\u00e4m\u00e4 t\u00e4ydent\u00e4v\u00e4t <strong>v\u00e4rin korostus hover -tehostetta<\/strong>.<\/p>\n<p>Siin\u00e4 on <strong>p\u00f6yt\u00e4konstruktoriominaisuus.<\/strong> T\u00e4m\u00e4n avulla k\u00e4ytt\u00e4j\u00e4t voivat mukauttaa rivin korostuksen v\u00e4ri\u00e4, ottaa hover-tehosteen k\u00e4ytt\u00f6\u00f6n ja n\u00e4ytt\u00e4\u00e4 taulukon reunat.<\/p>\n<h3>Muutama sarake, monta rivi\u00e4<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/smashing-magazine\/embed\/omzbGY\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4m\u00e4 on datataulukko, jonka suunnittelu on yksinkertainen ja joka toimii sek\u00e4 <strong>teksti- ett\u00e4 numeerisilla tiedoilla<\/strong>. Sarakkeet ovat reunattomia ja taulukon riveill\u00e4 on vuorottelevat v\u00e4rit.<\/p>\n<p>Ne, jotka j\u00e4sent\u00e4v\u00e4t tietoja luetteloon, voivat hy\u00f6ty\u00e4 t\u00e4st\u00e4 suunnittelusta.<\/p>\n<h3>Responstable 2.0: reagoiva p\u00f6yt\u00e4ratkaisu<\/h3>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/codepen.io\/jordyvanraaij\/embed\/jlAqp\" frameborder=\"0\"><\/iframe><\/div>\n<p>T\u00e4ss\u00e4 tietotaulukossa on sarake <strong>valintapainikkeita<\/strong>, joita voidaan k\u00e4ytt\u00e4\u00e4 <strong>lomakkeiden luomiseen<\/strong>.<\/p>\n<p>Sarakkeet ovat yht\u00e4 leveit\u00e4 ja riveill\u00e4 vuorotellen valkoinen ja vaaleansininen v\u00e4ri. Otsikossa on selke\u00e4 sinivihre\u00e4 v\u00e4ri muuttujien korostamiseksi.<\/p>\n<h2>Lopetetaan ajatukset n\u00e4ist\u00e4 upeista esimerkeist\u00e4 tietotaulukoista<\/h2>\n<p>Tietotaulukon k\u00e4ytt\u00e4minen on loistava tapa <strong>j\u00e4rjest\u00e4\u00e4 suurin osa verkkosis\u00e4ll\u00f6st\u00e4<\/strong>. Se ei ainoastaan \u200b\u200bparanna verkkosivun visuaalista suunnittelua ja asettelua, vaan my\u00f6s <strong>parantaa k\u00e4ytt\u00f6kokemusta<\/strong>.<\/p>\n<p>Tietotaulukoiden avulla k\u00e4ytt\u00e4j\u00e4t voivat selata tietoja ja luoda analyysin.<\/p>\n<p>Tietotaulukkoa suunniteltaessa on t\u00e4rke\u00e4\u00e4 <strong>antaa k\u00e4ytt\u00e4jille mahdollisuus hallita<\/strong> sis\u00e4lt\u00f6\u00e4. Kun he voivat k\u00e4sitell\u00e4 ja suodattaa tietoja tarpeidensa mukaan, taulukko on hy\u00f6dyllisempi.<\/p>\n<p>Datataulukoiden esimerkit osoittavat joukon suunnitteluideoita. N\u00e4m\u00e4 auttavat sinua luomaan tietotaulukon verkkosivustollesi.<\/p>\n<p>Jos pidit t\u00e4m\u00e4n artikkelin lukemisesta tietotaulukoiden esimerkkeist\u00e4, sinun kannattaa tutustua t\u00e4h\u00e4n artikkeliin <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-tehdae-tietotaulukko-verkossa-wordpressin-avulla\/\" title=\"tietotaulukon tekemisest\u00e4.\">tietotaulukon tekemisest\u00e4.<\/a><\/p>\n<p>Kirjoitimme my\u00f6s muutamista aiheeseen liittyvist\u00e4 aiheista, kuten <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/upeita-hintataulukon-esimerkkejae-39-mallia\/\" title=\"hinnoittelutaulukon esimerkeist\u00e4\">hinnoittelutaulukon esimerkeist\u00e4<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/paras-datatables-vaihtoehto-kokeile-naeitae-vaihtoehtoja\/\" title=\"DataTables-vaihtoehdoista\">DataTables-vaihtoehdoista<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/parhaat-javascript-taulukkokirjastovaihtoehdot-joista-valita\/\" title=\"JavaScript-taulukkokirjastosta\">JavaScript-taulukkokirjastosta<\/a>, <a href=\"https:\/\/wpdatatables.com\/wordpress-table-plugins\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress-taulukkolaajennuksista<\/a> ,\u00a0 taulukon <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-luoda-taulukko-wordpressissae-ilman-laajennusta\/\" title=\"luomisesta WordPressiss\u00e4 ilman laajennusta\">luomisesta WordPressiss\u00e4 ilman laajennusta<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-lisaetae-taulukko-wordpressiin-helposti\/\" title=\"taulukon lis\u00e4\u00e4misest\u00e4 WordPressiin\">taulukon lis\u00e4\u00e4misest\u00e4 WordPressiin<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/suosituimmat-wordpress-hinnoittelutaulukkolaajennukset\/\" title=\"WordPress-hinnoittelutaulukkolaajennuksista\">WordPress-hinnoittelutaulukkolaajennuksista<\/a> ja <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-luoda-tilastotaulukoita-wordpressissae\/\" title=\"miten luoda tilastotaulukoita WordPressiss\u00e4.\">miten luoda tilastotaulukoita WordPressiss\u00e4.<\/a><\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpdatatables.com\" class=\"external external_icon\">wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Annamme lis\u00e4\u00e4 ideoita tietotaulukoiden hy\u00f6dynt\u00e4miseen verkkosivustoilla tarjoamalla hienoja esimerkkej\u00e4 tietotaulukoista ja vinkkej\u00e4 sellaisen suunnitteluun.<\/p>\n","protected":false},"author":1,"featured_media":185664,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[1018,843,864],"tags":[1166],"class_list":["post-227734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hyodyllisia-sivustoja","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/227734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=227734"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/227734\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/185664"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=227734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=227734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=227734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}