Skip to content

Kuinka luoda seepra-raidalliset taulukot CSS: n avulla

24 de kesäkuu de 2021

Taulukoiden lukemisen helpottamiseksi on usein hyödyllistä muotoilla rivejä vuorotellen taustaväreillä. Yksi yleisimmistä tavoista muotoilla taulukoita on asettaa jokaisen toisen rivin taustaväri. Tätä kutsutaan usein ”seepra-raidoiksi”. Voit saavuttaa tämän asettamalla joka toinen rivi CSS-luokalla ja määrittämällä sitten luokan tyyli. Tämä toimii, mutta se ei ole paras tai tehokkain tapa edetä. Tätä menetelmää käytettäessä joudut muokkaamaan jokaista taulukon jokaista riviä aina, kun sinun on muokattava taulukkoa varmistaaksesi, että jokainen rivi on yhdenmukainen muutosten kanssa. Jos esimerkiksi lisäät taulukkoon uuden rivin, luokkaa on muutettava jokainen sen alla oleva rivi. CSS: n avulla on helppo muotoilla taulukoita seeprailla. Sinun ei tarvitse lisätä mitään ylimääräisiä HTML-määritteitä tai CSS-luokkia, vaan vain: n-tyypin (n) CSS-valitsin. N-tyypin (n) valitsin on CSS: n rakenteellinen näennäisluokka, jonka avulla voit muotoilla elementtejä niiden suhteiden perusteella vanhempien ja sisarusten elementteihin. Voit käyttää sitä valitaksesi yhden tai useamman elementin niiden lähdejärjestyksen perusteella. Toisin sanoen, se voi täsmätä kaikkiin elementteihin, jotka ovat vanhempiensa tietyn tyyppinen n. Lapsi. Kirjain n voi olla avainsana (kuten pariton tai parillinen), luku tai kaava. Esimerkiksi jokaisen toisen kappaletunnisteen muotoilemiseksi keltaisella taustavärillä CSS-dokumenttisi sisältää: p: n-tyypin (pariton) {
tausta: keltainen;
}

type = ”code”>

Aloita HTML-taulukostasi

Luo ensin taulukosi samalla tavalla kuin kirjoitat sen HTML-muodossa. Älä lisää mitään erikoisluokkia riveihin tai sarakkeisiin. Lisää tyylitaulukkoon seuraava CSS: tr: n-of-type (outoa) {
taustaväri: #ccc;
}

type = ”code”> Tämä tyylittää kaikki muut rivit harmaalla taustavärillä ensimmäisestä rivistä alkaen.

Tyyli vuorotellen sarakkeita samalla tavalla

Voit tehdä samanlaisen tyylin taulukoiden sarakkeisiin. Voit tehdä niin muuttamalla CSS-luokan tr: n trd: ksi. Esimerkiksi: td: nth-of-type (pariton) {
taustaväri: #ccc;
}

type = ”code”>

Kaavojen käyttäminen n-tyypin (n) valitsimessa

Valitsimessa käytetyn kaavan syntakse on + b.

  • a on luku, joka edustaa jaksoa tai hakemistokokoa.
  • n on itse asiassa kirjain ”n” ja edustaa laskuria, jonka tähti on 0.
  • + on operaattori, joka voi olla myös ”-”
  • b on kokonaisluku ja edustaa siirtymäarvoa – esimerkiksi kuinka monta riviä alaspäin valitsimen tulisi alkaa käyttää taustaväriä. Tämä vaaditaan, jos kaavaan sisältyy operaattori.

Esimerkiksi, jos haluat asettaa taustavärin jokaiselle 3. riville, kaava olisi 3n + 0. CSS voi näyttää tältä: tr: n-of-type (3n + 0) {
tausta: slategray;
}

type = ”code”>

Hyödyllisiä työkaluja n-tyypin valitsimen käyttämiseen

Jos tunnet olevasi hieman peloissaan näennäisluokan n: n tyyppisen valitsimen kaava-näkökohdista, kokeile: nth Tester -sivustoa hyödyllisenä työkaluna, jonka avulla voit määrittää syntaksin haluamasi ilmeen saavuttamiseksi. Valitse pudotusvalikosta tyypin n. Tyyppi (voit kokeilla myös muita näennäisluokkia, kuten n. Lapsi).

Alusta mla apa chicago Sinun viitteesi

Kyrnin, Jennifer. ”Kuinka luoda seepraraidoitetut taulukot CSS: n avulla.” ThoughtCo, toukokuu. 25, 2021, thinkco.com/zebra-striped-table-in-css3-3466982.
Kyrnin, Jennifer. (2021, 25. toukokuuta). Kuinka luoda seepra-raidalliset taulukot CSS: n avulla. Haettu osoitteesta https://www.thoughtco.com/zebra-striped-table-in-css3-3466982
Kyrnin, Jennifer. ”Kuinka luoda seepraraidoitetut taulukot CSS: n avulla.” ThoughtCo. https://www.thoughtco.com/zebra-striped-table-in-css3-3466982 (käytetty 24. kesäkuuta 2021).