Pentru a ușura citirea tabelelor, este de multe ori util să coafați rândurile cu culori de fundal alternative. Una dintre cele mai frecvente modalități de stilizare a tabelelor este setarea culorii de fundal pentru fiecare rând. Aceasta este adesea denumită „dungi de zebră”.
Puteți realiza acest lucru prin setarea fiecărui rând cu o clasă CSS și apoi prin definirea stilului pentru clasa respectivă. Acest lucru funcționează, dar nu este cel mai bun sau cel mai eficient mod de a face acest lucru. Când utilizați această metodă, de fiecare dată când trebuie să editați tabelul respectiv, poate fi necesar să editați fiecare rând din tabel pentru a vă asigura că fiecare rând este în concordanță cu modificările. De exemplu, dacă introduceți un rând nou în tabel, fiecare rând de dedesubt trebuie să aibă clasa modificată.
CSS facilitează stilarea meselor cu dungi de zebră. Nu trebuie să adăugați niciun plus HTML atribute sau clase CSS, trebuie doar să utilizați: nth-of-type (n) Selector CSS.
Selectorul: nth-of-type (n) este o pseudo-clasă structurală în CSS care vă permite să stilizați elemente pe baza relațiilor lor cu elementele părinte și frate. Îl puteți folosi pentru a selecta unul sau mai multe elemente în funcție de ordinea sursă a acestora. Cu alte cuvinte, se poate potrivi cu fiecare element care este al nouălea copil al unui anumit tip de părinte.
Litera n poate fi un cuvânt cheie (cum ar fi impar sau par), un număr sau o formulă.
De exemplu, pentru a stiliza toate celelalte etichete de paragraf cu o culoare de fundal galbenă, documentul dvs. CSS ar include:
p: al n-lea de tip (impar) {
fundal: galben;
}
Începeți cu tabelul dvs. HTML
Mai întâi, creați tabelul așa cum l-ați scrie în mod normal în HTML. Nu adăugați clase speciale la rânduri sau coloane.
În foaia de stil, adăugați următorul CSS:
tr: al n-lea de tip (impar) {
culoare de fundal: #ccc;
}
Aceasta va stiliza fiecare rând cu o culoare de fundal gri începând cu primul rând.
Stilați alternativ coloanele în același mod
Puteți face același tip de stil pentru coloanele din tabelele dvs. Pentru a face acest lucru, pur și simplu schimbați tr din clasa dvs. CSS în td. De exemplu:
td: al n-lea de tip (impar) {
culoare de fundal: #ccc;
}
Utilizarea formulelor într-un selector al n-lea de tip (n)
Sintaxa pentru o formulă utilizată în selector este un + b.
- a este un număr care reprezintă dimensiunea ciclului sau a indexului.
- n este de fapt litera „n” și reprezintă un contor, care stea la 0.
- + este un operator, care poate fi și „-”
- b este un număr întreg și reprezintă valoarea de compensare - de exemplu, câte rânduri în jos ar trebui să înceapă selectorul să aplice culoarea de fundal. Acest lucru este necesar dacă un operator este inclus în formulă.
De exemplu, dacă doriți să setați o culoare de fundal pentru fiecare al treilea rând, formula dvs. ar fi 3n + 0. CSS-ul dvs. ar putea arăta astfel:
tr: al n-lea de tip (3n + 0) {
fundal: slategray;
}
Instrumente utile pentru utilizarea selectorului de tip n
Dacă vă simțiți puțin descurajat de aspectul formulă al utilizării selectorului pseudo-clasa n-de tip, încercați site-ul: nth Tester ca un instrument util care vă poate ajuta să definiți sintaxa pentru a obține aspectul dorit. Utilizați meniul derulant pentru a selecta nth-of-type (puteți experimenta și alte pseudo-clase și aici, cum ar fi nth-child).