Da bi se tablice olakšale za čitanje, često je korisno oblikovati retke naizmjeničnim bojama pozadine. Jedan od najčešćih načina oblikovanja tablica je postavljanje boje pozadine svakog drugog retka. To se često naziva "zebrastim prugama".
To možete postići postavljanjem svakog drugog reda s CSS klasom, a zatim definiranjem stila za tu klasu. To djeluje, ali nije najbolji ili najučinkovitiji način za to. Kada upotrebljavate ovu metodu, svaki put kada trebate urediti tu tablicu, možda ćete morati urediti svaki pojedini redak u tablici kako biste bili sigurni da je svaki redak u skladu s promjenama. Na primjer, ako u tablicu umetnete novi redak, svaki drugi redak ispod nje mora promijeniti razred.
CSS olakšava oblikovanje stolova sa zebrastim prugama. Ne trebate dodavati nikakve dodatke HTML atribute ili CSS klase, samo koristite: nth-of-type (n) CSS selektor.
Selektor: nth-of-type (n) strukturna je pseudo-klasa u CSS-u koja vam omogućuje oblikovanje elemenata na temelju njihovih odnosa s roditeljskim i bratskim elementima. Pomoću nje možete odabrati jedan ili više elemenata na temelju njihovog izvornog redoslijeda. Drugim riječima, može se podudarati sa svakim elementom koji je n-to podređeno tijelo određene vrste roditelja.
Slovo n može biti ključna riječ (poput neparne ili parne), broj ili formula.
Na primjer, za oblikovanje svake druge oznake odlomka žutom bojom pozadine, vaš CSS dokument uključuje:
p: n-tipa (neparno) {
pozadina: žuta;
}
Počnite s HTML tablicom
Prvo stvorite tablicu onako kako biste je inače napisali u HTML-u. U retke ili stupce nemojte dodavati posebne klase.
U vašu listu stilova dodajte sljedeći CSS:
tr: n-tipa (neparno) {
boja pozadine: #ccc;
}
Tako ćete oblikovati svaki drugi redak sivom bojom pozadine počevši od prvog reda.
Na isti način stilizirajte izmjenične stupce
Isti takav stil možete napraviti i za stupce u tablicama. Da biste to učinili, jednostavno promijenite tr u svojoj CSS klasi u td. Na primjer:
td: nth-of-type (ak) {
boja pozadine: #ccc;
}
Korištenje formula u n-tom tipu (n) biraču
Sintaksa formule koja se koristi u biraču je + b.
- a je broj koji predstavlja veličinu ciklusa ili indeksa.
- n je zapravo slovo "n" i predstavlja brojač koji zvijezde na 0.
- + je operator, koji također može biti "-"
- b je cijeli broj i predstavlja vrijednost pomaka - na primjer, koliko redaka prema dolje birač treba početi primjenjivati boju pozadine. To je potrebno ako je operator uključen u formulu.
Na primjer, ako želite postaviti boju pozadine za svaki 3. redak, vaša bi formula bila 3n + 0. Vaš CSS može izgledati ovako:
tr: n-tipa (3n + 0) {
pozadina: slategray;
}
Korisni alati za upotrebu selektora n-tog tipa
Ako se osjećate pomalo zaprepašteno aspektom formule korištenja selektora n-tog tipa pseudo-klase, isprobajte: nth Tester web mjesto kao koristan alat koji vam može pomoći u definiranju sintakse kako biste postigli željeni izgled. Pomoću padajućeg izbornika odaberite nth-of-type (ovdje također možete eksperimentirati i s drugim pseudo-klasama, poput nth-child).