{"id":226784,"date":"2022-08-29T16:27:00","date_gmt":"2022-08-29T13:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226784"},"modified":"2022-11-09T02:22:48","modified_gmt":"2022-11-08T23:22:48","slug":"kuinka-asettaa-taulukon-taustavaeri-helposti","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-asettaa-taulukon-taustavaeri-helposti\/","title":{"rendered":"Kuinka asettaa taulukon taustav\u00e4ri helposti"},"content":{"rendered":"\n

Taulukot ovat v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4 verkkosivustosi osia. Niit\u00e4 k\u00e4ytet\u00e4\u00e4n v\u00e4litt\u00e4m\u00e4\u00e4n t\u00e4rkeit\u00e4 tietoja helposti ymm\u00e4rrett\u00e4v\u00e4ll\u00e4 tavalla. Pohjimmiltaan taulukko on ryhm\u00e4 tai kokoelma rivej\u00e4 ja sarakkeita, joista jokainen sis\u00e4lt\u00e4\u00e4 tietyntyyppist\u00e4 tietoa. Ne oli alun perin tarkoitettu osaksi HTML-merkint\u00e4\u00e4.<\/p>\n

Vaikka taulukot ovat oikea tapa esitt\u00e4\u00e4 tietoja, monet suunnittelijat v\u00e4ltt\u00e4v\u00e4t niit\u00e4 vain siksi, ett\u00e4 ne voivat n\u00e4ytt\u00e4\u00e4 ep\u00e4miellytt\u00e4vilt\u00e4. Sit\u00e4 voidaan kuitenkin muuttaa pienell\u00e4 ty\u00f6ll\u00e4 ja ottamalla k\u00e4ytt\u00f6\u00f6n joitain helppoja menetelmi\u00e4, esimerkiksi vaihtamalla taulukon taustav\u00e4ri\u00e4. Ei ole aikaa viev\u00e4\u00e4 tehd\u00e4 p\u00f6ydist\u00e4 helposti houkuttelevia joillakin s\u00e4\u00e4t\u00f6ill\u00e4.<\/p>\n

Tulet pian huomaamaan, ett\u00e4 taulukkotietojen esitt\u00e4minen toimii parhaiten taulukoissa, kuten on odotettavissa. Taulukon soluja k\u00e4ytet\u00e4\u00e4n usein HTML-<\/a> merkinn\u00f6iss\u00e4 komponentteina, joihin sis\u00e4lt\u00f6 sijoitetaan verkkosivuston luomiseksi. N\u00e4m\u00e4 solut tai ruudukot ovat olennaisia \u200b\u200b\u200b\u200bosia verkkosivustojen suunnittelussa. Siksi sinun on t\u00e4rke\u00e4\u00e4 tehd\u00e4 verkkosivustosi taulukoista houkuttelevia ja hyvin \u00f6ljyttyj\u00e4.<\/p>\n

T\u00e4ss\u00e4 wpDataTables<\/a> -tiimimme luomassa artikkelissa tarkastellaan, kuinka voit muuttaa ja asettaa taulukon taustav\u00e4ri\u00e4 helposti. T\u00e4m\u00e4 voi ainakin tuoda vaihtelua sis\u00e4lt\u00f6\u00f6n.<\/p>\n

WordPress-taulukot<\/h3>\n

WordPressin oletusversio ei anna sinulle, luojalle, merkitt\u00e4v\u00e4\u00e4 apua taulukoiden luomisessa tai vaihtamisessa.<\/a> Joten sinun on teht\u00e4v\u00e4 t\u00e4m\u00e4 manuaalisesti. WordPress-sivuston<\/a> luojana sinun on ensin otettava k\u00e4ytt\u00f6\u00f6n editorin tekstitila ennen kuin muutat HTML-koodia ja lis\u00e4\u00e4t siihen taulukkokoodeja.<\/p>\n

T\u00e4m\u00e4n lis\u00e4ksi taulukon taustav\u00e4rin s\u00e4\u00e4t\u00e4minen on teht\u00e4v\u00e4 manuaalisesti. Taulukon luomisen j\u00e4lkeen taulukon taustav\u00e4ri asetetaan automaattisesti vastaamaan teemataustan v\u00e4ri\u00e4. Ainoa tapa tehd\u00e4 taulukon taustasta yksil\u00f6llinen on muuttaa koodin arvoja ja toteuttaa n\u00e4m\u00e4 muutokset<\/a> my\u00f6hemmin CSS:ll\u00e4.<\/p>\n

Taulukon taustav\u00e4rin muuttaminen manuaalisesti<\/h2>\n

Kun haluat sis\u00e4llytt\u00e4\u00e4 HTML-taulukon verkkosivustoosi, sinun kannattaa ehk\u00e4 ensin muokata sit\u00e4 hieman ennen tietojen sijoittamista taulukon soluihin. Voit esimerkiksi muuttaa HTML-taulukon taustav\u00e4ri\u00e4, mutta voit tehd\u00e4 joitain muita muutoksia taulukon reunoihin, sarakkeiden v\u00e4reihin ja muihin.<\/p>\n

CSS-koodin muuttaminen on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 kaikille taulukon suunnittelun muutoksille. Asiat, kuten taulukon taustav\u00e4ri, asetetaan CSS-koodissa, samoin kuin kaikki koko HTML-taulukon ominaisuudet sek\u00e4 rivien ja solujen ominaisuudet.<\/p>\n

Katsotaanpa nyt, kuinka taustav\u00e4rej\u00e4 voidaan muuttaa manuaalisesti muuttamalla CSS-koodia.<\/p>\n

Kuinka muuttaa koko taulukon taustav\u00e4ri\u00e4<\/h3>\n

Voit tehd\u00e4 t\u00e4m\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 seuraavan koodinp\u00e4tk\u00e4n.<\/p>\n

<table style=\"background-color:#70163C;\"><\/code><\/pre>\n
Taulukon rivin v\u00e4rin muuttaminen<\/h3>\n
Voit my\u00f6s muuttaa yksitt\u00e4isen taulukon rivin v\u00e4ri\u00e4, joka voi poiketa taulukon taustav\u00e4rist\u00e4. Kun yksitt\u00e4inen rivi on eri v\u00e4rinen kuin tausta, haluttu taulukon rivi kiinnitt\u00e4\u00e4 ihmisten huomion. Seuraavalla koodinp\u00e4tk\u00e4ll\u00e4 voimme muuttaa yhden rivin v\u00e4ri\u00e4. My\u00f6s tekstin v\u00e4ri muuttuu.<\/p>\n
<table style=\"background-color:#70163C;\"><\/code><\/pre>\n
Solun taustav\u00e4rin muuttaminen<\/h3>\n
Aivan kuten yksitt\u00e4isen rivin v\u00e4rin muuttaminen, voit muuttaa my\u00f6s yksitt\u00e4isen solun v\u00e4ri\u00e4. Voit muuttaa rivin v\u00e4ri\u00e4 lis\u00e4\u00e4m\u00e4ll\u00e4 "tyyli"-ominaisuuden<\/p>\n
suluissa ja m\u00e4\u00e4rit\u00e4 solun v\u00e4ri sielt\u00e4.<\/p>\n
<table style=\"background-color:#70163C;\"><\/code><\/pre>\n
Solun tausta ja tekstin v\u00e4ri<\/h3>\n
Katsotaanpa seuraavaksi, kuinka asetat taustav\u00e4rin kokonaisille riveille ja kuinka muutat vastaavia tekstiv\u00e4rej\u00e4. Voit tehd\u00e4 sen lis\u00e4\u00e4m\u00e4ll\u00e4 taustav\u00e4rin ominaisuudet<\/p>\n
-tunnisteet, kuten alla olevassa l\u00e4hdekoodissa on esimerkki. My\u00f6s reunusten v\u00e4rej\u00e4 muutetaan, koska ne voivat olla samat taustav\u00e4rien kanssa.<\/p>\n
<style type=\"text\/css\">\n<\/code><\/pre>\n
Lis\u00e4osien k\u00e4ytt\u00e4minen taulukon taustav\u00e4rin muuttamiseen<\/h2>\n
Voit yksinkertaistaa koko taulukon taustav\u00e4rin vaihtamisprosessia k\u00e4ytt\u00e4m\u00e4ll\u00e4<\/a> sen sijaan joitain laajennuksia. Oletuksena WordPress ei tarjoa ominaisuutta muuttaa taulukon v\u00e4rej\u00e4, mutta voit sis\u00e4llytt\u00e4\u00e4 siihen joitain laajennuksia, joiden avulla voit tehd\u00e4 sen eritt\u00e4in nopeasti. T\u00e4ss\u00e4 tarkastellaan parhaita laajennuksia, joilla voit muuttaa taulukon taustav\u00e4ri\u00e4 WordPress-sivustoilla, ja kuinka niit\u00e4 k\u00e4ytet\u00e4\u00e4n.<\/p>\n
wpDataTables<\/h3>\n
wpDataTables on myydyin WordPress-taulukkolaajennus<\/a>, joka tekee ty\u00f6st\u00e4si taulukoiden, kaavioiden ja tiedonhallinnan kanssa eritt\u00e4in helppoa. Yli 30 000 yrityst\u00e4 ja yksityishenkil\u00f6\u00e4 luottaa jo wpDataTablesiin taloudellisten, tieteellisten, tilastollisten, kaupallisten ja muiden tietojen kanssa.<\/p>\n
wpDataTables-laajennuksella luodut WordPress-taulukot ovat natiiviresponsiivisia ja niit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 kaikilla laitetyypeill\u00e4.<\/p>\n
wpDataTables toimii nopeasti riippumatta siit\u00e4, onko taulukossasi muutama tai muutama miljoona rivi\u00e4. Kaikki toiminnot hoitaa MySQL-palvelin.<\/p>\n
wpDataTables antaa sinun luoda yksitt\u00e4isi\u00e4 suodattimia tietojoukollesi, mik\u00e4 on varsin k\u00e4tev\u00e4 tapa rajata nopeasti WordPress-taulukkosi tuloksia.<\/p>\n
TablePress<\/h3>\n
\"Kuinka<\/a><\/p>\n
Upeiden ja houkuttelevien p\u00f6ytien luominen ainutlaatuisilla taustav\u00e4reill\u00e4 ei ole koskaan ollut helpompaa kuin TablePressin avulla. Voit muuttaa v\u00e4rej\u00e4 TablePressin Plugin Options -v\u00e4lilehdell\u00e4, jonka avulla voit muuttaa taulukon v\u00e4rej\u00e4 nopeasti.<\/p>\n
Sen avulla voit my\u00f6s muuttaa yhden rivin v\u00e4ri\u00e4. Esimerkiksi t\u00e4llaista koodinp\u00e4tk\u00e4\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 t\u00e4h\u00e4n:<\/p>\n
.tablepress-id-N .row-X td {<\/code><\/pre>\n
Voit muuttaa v\u00e4rikoodia valitaksesi haluamasi v\u00e4rit.<\/p>\n
Ninja-p\u00f6yd\u00e4t<\/h3>\n
\"Kuinka<\/a><\/p>\n
Toinen vaihtoehto on Ninja Tables -laajennus. T\u00e4m\u00e4n laajennuksen avulla voit luoda upeita ja reagoivia taulukoita.<\/a> Kaikki voidaan tehd\u00e4 vain parilla napsautuksella; sinun tarvitsee vain avata laajennuksen "muokkaa"-osa. T\u00e4m\u00e4 paljastaa joitain eritt\u00e4in kattavia vaihtoehtoja taulukoiden muuttamiseksi.<\/p>\n
Jos pidit t\u00e4m\u00e4n artikkelin lukemisesta taulukon taustav\u00e4rin helposta asettamisesta, sinun kannattaa tutustua t\u00e4h\u00e4n Bootstrap-taulukoita<\/a> k\u00e4sittelev\u00e4\u00e4n artikkeliin .<\/p>\n
Kirjoitimme my\u00f6s muutamista aiheeseen liittyvist\u00e4 aiheista, kuten taulukon keskitt\u00e4minen<\/a> CSS:ll\u00e4, HTML-taulukot<\/a>, reagoivat taulukot<\/a> CSS:ll\u00e4, CSS-taulukot<\/a> ja jQuery-taulukkolaajennukset<\/a>.<\/p>\n
:  wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Taulukon taustav\u00e4ri on teht\u00e4v\u00e4 manuaalisesti. Taulukon luomisen j\u00e4lkeen taulukon taustav\u00e4ri asetetaan automaattisesti vastaamaan<\/p>\n","protected":false},"author":1,"featured_media":201277,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[843,864],"tags":[1166],"class_list":["post-226784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/226784","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=226784"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/226784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/201277"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=226784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=226784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=226784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}