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äärittelemä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 jokaisella sen alla olevalla rivillä.
CSS tekee seepra-raidat helpoksi muotoilla. Sinun ei tarvitse lisätä mitään ylimääräistä HTML määritteitä tai CSS-luokkia, käytä vain: n-of-type (n) CSS-valitsin.
N-tyypin (n) valitsin on CSS: n rakenteellinen näennäisluokka, jonka avulla voit muotoilla elementtejä 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 kappaletagin muotoilemiseksi keltaisella taustavärillä CSS-asiakirjasi sisältää:
p: n-tyypin tyyppi (pariton) {
tausta: keltainen;
}
Aloita HTML-taulukostasi
Luo ensin taulukosi samalla tavalla kuin kirjoitat sen HTML-muodossa. Älä lisää mitään erikoisluokkia riveihin tai sarakkeisiin.
Lisää tyylitaulukkoosi seuraava CSS:
tr: n-tyyppinen (pariton) {
taustaväri: #ccc;
}
Tämä muotoilee 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: n-tyypin tyyppi (pariton) {
taustaväri: #ccc;
}
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-tyypin tyyppi (3n + 0) {
tausta: slategray;
}
Hyödyllisiä työkaluja n-tyypin valitsimen käyttämiseen
Jos tunnet olevasi hieman peloissaan näennäisluokan n: n tyyppisen valitsimen käytöstä, 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).