Tabelite loetavamaks muutmiseks on sageli kasulik vahelduva taustavärviga ridu kujundada. Üks levinumaid viise tabelite kujundamiseks on iga teise rea taustavärvi määramine. Seda nimetatakse sageli "sebra triipudeks".
Selle saate saavutada, määrates CSS-klassiga kõik muud read ja määrates seejärel selle klassi stiili. See töötab, kuid pole parim ega tõhusam viis selle saavutamiseks. Selle meetodi kasutamisel peate iga kord, kui peate seda tabelit redigeerima, muutma iga tabeli rida, et tagada, et iga rida on muudatustega kooskõlas. Näiteks kui lisate oma tabelisse uue rea, peab iga teine rida selle all klassi muutma.
CSS muudab sebraribadega laudade kujundamise lihtsaks. Teil pole vaja lisaraha lisada HTML atribuutide või CSS-klasside jaoks, kasutage lihtsalt järgmist: n-tüüpi tüüp (n) CSS-i valija.
Valija: n-tüüpi tüüp (n) on CSS-i struktuuriline pseudoklass, mis võimaldab teil elemente stiilida lähtuvalt nende suhetest vanema ja õe-venna elementidega. Selle abil saate valida ühe või mitu elementi nende lähtejärjestuse põhjal. Teisisõnu võib see sobitada iga elemendiga, mis on tema vanemate teatud tüüpi n-nda laps.
N-täht võib olla märksõna (näiteks paaritu või paaritu), arv või valem.
Näiteks iga teise lõigu sildi kujundamiseks kollase taustavärviga peaks teie CSS-dokument sisaldama järgmist:
p: tüübi n-nda (paaritu) {
taust: kollane;
}
Alustage oma HTML-tabelist
Kõigepealt looge oma tabel nii, nagu tavaliselt HTML-i kirjutaksite. Ärge lisage ridadele ega veergudele mingeid eriklasse.
Lisage oma stiililehele järgmine CSS:
tr: n-tüüpi (paaritu) {
taustavärv: #ccc;
}
See kujundab iga teise rea halli taustavärviga, alustades esimesest reast.
Stiili vahelduvad veerud samamoodi
Oma tabelite veergudele saate teha samasugust stiili. Selleks muutke lihtsalt CSS-klassi tr väärtus td-ks. Näiteks:
td: n-tüüpi (paaritu) {
taustavärv: #ccc;
}
Valemite kasutamine n-tüüpi tüübi (n) valijas
Valijas kasutatava valemi süntaks on + b.
- a on number, mis tähistab tsüklit või indeksi suurust.
- n on tegelikult täht "n" ja tähistab loendurit, mis tähistab tähte 0.
- + on operaator, mis võib olla ka "-"
- b on täisarv ja tähistab nihke väärtust - näiteks mitu rida allapoole peaks valik alustama taustavärvi rakendamist. See on vajalik, kui valemis on operaator.
Näiteks kui soovite iga 3. rea jaoks määrata taustavärvi, oleks teie valem 3n + 0. Teie CSS võib välja näha järgmine:
tr: n-tüüp (3n + 0) {
taust: slategray;
}
Kasulikud tööriistad n-tüüpi tüübi valija kasutamiseks
Kui tunnete pseudoklassi n-tüüpi valija kasutamise valemaspektist veidi hirmu, proovige: n-nda testri saiti kasuliku tööriistana, mis aitab teil soovitud ilme saavutamiseks süntaksit määratleda. Kasutage rippmenüüd n-tüüpi tüübi valimiseks (siin saate katsetada ka teiste pseudoklassidega, näiteks n-laps).