Kuinka asettaa taulukon taustaväri helposti
Taulukot ovat välttämättömiä verkkosivustosi osia. Niitä käytetään välittämään tärkeitä tietoja helposti ymmärrettävällä tavalla. Pohjimmiltaan taulukko on ryhmä tai kokoelma rivejä ja sarakkeita, joista jokainen sisältää tietyntyyppistä tietoa. Ne oli alun perin tarkoitettu osaksi HTML-merkintää.
Vaikka taulukot ovat oikea tapa esittää tietoja, monet suunnittelijat välttävät niitä vain siksi, että ne voivat näyttää epämiellyttäviltä. Sitä voidaan kuitenkin muuttaa pienellä työllä ja ottamalla käyttöön joitain helppoja menetelmiä, esimerkiksi vaihtamalla taulukon taustaväriä. Ei ole aikaa vievää tehdä pöydistä helposti houkuttelevia joillakin säätöillä.
Tulet pian huomaamaan, että taulukkotietojen esittäminen toimii parhaiten taulukoissa, kuten on odotettavissa. Taulukon soluja käytetään usein HTML- merkinnöissä komponentteina, joihin sisältö sijoitetaan verkkosivuston luomiseksi. Nämä solut tai ruudukot ovat olennaisia osia verkkosivustojen suunnittelussa. Siksi sinun on tärkeää tehdä verkkosivustosi taulukoista houkuttelevia ja hyvin öljyttyjä.
Tässä wpDataTables -tiimimme luomassa artikkelissa tarkastellaan, kuinka voit muuttaa ja asettaa taulukon taustaväriä helposti. Tämä voi ainakin tuoda vaihtelua sisältöön.
WordPress-taulukot
WordPressin oletusversio ei anna sinulle, luojalle, merkittävää apua taulukoiden luomisessa tai vaihtamisessa. Joten sinun on tehtävä tämä manuaalisesti. WordPress-sivuston luojana sinun on ensin otettava käyttöön editorin tekstitila ennen kuin muutat HTML-koodia ja lisäät siihen taulukkokoodeja.
Tämän lisäksi taulukon taustavärin säätäminen on tehtävä manuaalisesti. Taulukon luomisen jälkeen taulukon taustaväri asetetaan automaattisesti vastaamaan teemataustan väriä. Ainoa tapa tehdä taulukon taustasta yksilöllinen on muuttaa koodin arvoja ja toteuttaa nämä muutokset myöhemmin CSS:llä.
Taulukon taustavärin muuttaminen manuaalisesti
Kun haluat sisällyttää HTML-taulukon verkkosivustoosi, sinun kannattaa ehkä ensin muokata sitä hieman ennen tietojen sijoittamista taulukon soluihin. Voit esimerkiksi muuttaa HTML-taulukon taustaväriä, mutta voit tehdä joitain muita muutoksia taulukon reunoihin, sarakkeiden väreihin ja muihin.
CSS-koodin muuttaminen on välttämätöntä kaikille taulukon suunnittelun muutoksille. Asiat, kuten taulukon taustaväri, asetetaan CSS-koodissa, samoin kuin kaikki koko HTML-taulukon ominaisuudet sekä rivien ja solujen ominaisuudet.
Katsotaanpa nyt, kuinka taustavärejä voidaan muuttaa manuaalisesti muuttamalla CSS-koodia.
Kuinka muuttaa koko taulukon taustaväriä
Voit tehdä tämän lisäämällä seuraavan koodinpätkän.
Taulukon rivin värin muuttaminen
Voit myös muuttaa yksittäisen taulukon rivin väriä, joka voi poiketa taulukon taustaväristä. Kun yksittäinen rivi on eri värinen kuin tausta, haluttu taulukon rivi kiinnittää ihmisten huomion. Seuraavalla koodinpätkällä voimme muuttaa yhden rivin väriä. Myös tekstin väri muuttuu.
Solun taustavärin muuttaminen
Aivan kuten yksittäisen rivin värin muuttaminen, voit muuttaa myös yksittäisen solun väriä. Voit muuttaa rivin väriä lisäämällä "tyyli"-ominaisuuden
suluissa ja määritä solun väri sieltä.
Solun tausta ja tekstin väri
Katsotaanpa seuraavaksi, kuinka asetat taustavärin kokonaisille riveille ja kuinka muutat vastaavia tekstivärejä. Voit tehdä sen lisäämällä taustavärin ominaisuudet
-tunnisteet, kuten alla olevassa lähdekoodissa on esimerkki. Myös reunusten värejä muutetaan, koska ne voivat olla samat taustavärien kanssa.
Lisäosien käyttäminen taulukon taustavärin muuttamiseen
Voit yksinkertaistaa koko taulukon taustavärin vaihtamisprosessia käyttämällä sen sijaan joitain laajennuksia. Oletuksena WordPress ei tarjoa ominaisuutta muuttaa taulukon värejä, mutta voit sisällyttää siihen joitain laajennuksia, joiden avulla voit tehdä sen erittäin nopeasti. Tässä tarkastellaan parhaita laajennuksia, joilla voit muuttaa taulukon taustaväriä WordPress-sivustoilla, ja kuinka niitä käytetään.
wpDataTables
wpDataTables on myydyin WordPress-taulukkolaajennus, joka tekee työstäsi taulukoiden, kaavioiden ja tiedonhallinnan kanssa erittäin helppoa. Yli 30 000 yritystä ja yksityishenkilöä luottaa jo wpDataTablesiin taloudellisten, tieteellisten, tilastollisten, kaupallisten ja muiden tietojen kanssa.
wpDataTables-laajennuksella luodut WordPress-taulukot ovat natiiviresponsiivisia ja niitä voidaan käyttää kaikilla laitetyypeillä.
wpDataTables toimii nopeasti riippumatta siitä, onko taulukossasi muutama tai muutama miljoona riviä. Kaikki toiminnot hoitaa MySQL-palvelin.
wpDataTables antaa sinun luoda yksittäisiä suodattimia tietojoukollesi, mikä on varsin kätevä tapa rajata nopeasti WordPress-taulukkosi tuloksia.
TablePress
Upeiden ja houkuttelevien pöytien luominen ainutlaatuisilla taustaväreillä ei ole koskaan ollut helpompaa kuin TablePressin avulla. Voit muuttaa värejä TablePressin Plugin Options -välilehdellä, jonka avulla voit muuttaa taulukon värejä nopeasti.
Sen avulla voit myös muuttaa yhden rivin väriä. Esimerkiksi tällaista koodinpätkää voidaan käyttää tähän:
.tablepress-id-N .row-X td {Voit muuttaa värikoodia valitaksesi haluamasi värit.
Ninja-pöydät
Toinen vaihtoehto on Ninja Tables -laajennus. Tämän laajennuksen avulla voit luoda upeita ja reagoivia taulukoita. Kaikki voidaan tehdä vain parilla napsautuksella; sinun tarvitsee vain avata laajennuksen "muokkaa"-osa. Tämä paljastaa joitain erittäin kattavia vaihtoehtoja taulukoiden muuttamiseksi.
Jos pidit tämän artikkelin lukemisesta taulukon taustavärin helposta asettamisesta, sinun kannattaa tutustua tähän Bootstrap-taulukoita käsittelevään artikkeliin .
Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten taulukon keskittäminen CSS:llä, HTML-taulukot, reagoivat taulukot CSS:llä, CSS-taulukot ja jQuery-taulukkolaajennukset.