Jotta taulukot olisi helpompi lukea, on usein hyödyllistä muotoilla rivit vaihtelevilla taustaväreillä. Yksi tavallisimmista tavoista muotoilla taulukoita on määrittää jokaisen toisen rivin taustaväri. Tätä kutsutaan usein "seepra-raidoiksi".
Voit suorittaa tämän asettamalla joka toisen rivin CSS-luokalla ja määrittämällä tämän luokan tyylin. Tämä toimii, mutta ei ole paras tai tehokkain tapa edetä. Tätä menetelmää käytettäessä jokaisen taulukon muokkaamisen yhteydessä saatat joutua muokkaamaan taulukon jokaista riviä varmistaaksesi, että jokainen rivi vastaa muutoksia. Jos esimerkiksi lisäät uuden rivin taulukkoon, sen alla olevan toisen rivin täytyy olla luokassa muuttunut.
CSS: n avulla on helppo suunnitella taulukoita seepra-raidoilla. Sinun ei tarvitse lisätä ylimääräisiä HTML-attribuutteja tai CSS-luokkia, käytät vain: nth-of-type (n) CSS-valitsinta.
N: o-tyypin (n) valitsin on rakenteellinen pseudoklassi CSS: ssä, jonka avulla voit jäsentää elementtejä niiden sukulaisuuksiin perustuvien elementtien perusteella. Voit valita sen valitsemalla yhden tai useamman elementin lähdetilauksen perusteella. Toisin sanoen se voi sopia kaikkiin elementteihin, jotka ovat sen vanhemman tietyn tyyppisen n: nnen lapsen.
Kirjain n voi olla avainsana (kuten pariton tai tasainen), numero tai kaava.
Esimerkiksi, kun haluat muokata jokaista kappalekoodia, jolla on keltainen taustaväri, CSS-dokumenttiin kuuluu:
p: nth-of-type (pariton) { tausta: keltainen;}
Aloita HTML-taulukossasi
Luo ensin taulukko tavalliseen tapaan HTML-muotoon. Älä lisää erikoisluokkia riveihin tai sarakkeisiin.
Lisää tyylisivustasi seuraavaan CSS: ään:
tr: n-tyypin (pariton) { background-color: #ccc;}
Tämä muotoilee joka toisen rivin, jossa on harmaa taustaväri alkaen ensimmäisestä rivistä.
Tyyli Vaihtoehtoiset sarakkeet samalla tavalla
Voit tehdä samanlaisen tyylin pöydän sarakkeille. Voit tehdä niin yksinkertaisesti vaihtamalla CSS-luokkasi p: n td: hen. Esimerkiksi:
td: nth-of-type (pariton) { background-color: #ccc;}
Kaavojen käyttäminen n-tyypin (n) valitsimessa
Valintaan käytetyn kaavan syntaksi on + b.
- a on luku, joka edustaa sykliä tai indeksikokoa.
- n on oikeastaan kirjain "n" ja edustaa laskuria, joka tähdet on 0.
- + on operaattori, joka voi myös olla "-"
- b on kokonaisluku ja edustaa offset-arvoa, esimerkiksi kuinka monta riviä alaspäin valitsimen on aloitettava taustavärien soveltaminen. Tämä on tarpeen, jos kaava sisällytetään operaattoriin.
Jos esimerkiksi haluat asettaa taustavärin joka 3. krs: n kohdalle, kaava olisi 3n + 0. CSS saattaa näyttää tältä:
tr: n-tyypin (3n + 0) { tausta: slategray;}
Hyödyllisiä työkaluja n-tyypin valitsimen käyttämiseen
Jos tunnet hieman kauhistuneena näennäistason n-tyypin valitsimen käyttämisestä, kokeile: nth Tester-sivustoa hyödyllisenä työkaluna, joka voi auttaa sinua määrittämään syntaksin haluamaasi ulkoasuun. Valitse avattavasta valikosta nth-of-type (voit kokeilla myös muita pseudo-luokkia täällä, kuten nth-child).
