Kako stvoriti Zebra Striped tablice s CSS

Korištenje: n-tipa (n) sa tablicama

Da bi se tablice lakše čitale, često je korisno oblikovati retke s izmjenjivim pozadinskim bojama. Jedan od najčešćih načina za stiliziranje tablica je postavljanje pozadinske boje svakog drugog retka. To se često naziva "zebra prugama".

To možete postići postavljanjem svakog drugog reda s CSS klasom, a zatim definiranjem stila za tu klasu. To funkcionira, ali nije najbolji ili najučinkovitiji način da se o njemu radi.

Kada koristite ovu metodu, svaki put kada trebate urediti tu tablicu, možda ćete morati urediti svaki redak u tablici kako bi svaki red bio u skladu s promjenama. Na primjer, ako umetnete novi redak u svoju tablicu, svaki drugi redak ispod njega mora promijeniti klase.

CSS olakšava oblikovanje tablica s zebrom. Ne morate dodati nikakve dodatne HTML atribute ili CSS klase, samo koristite: nth-of-type (n) CSS selektor .

Odabir n-tipa (n) strukturalna je pseudo-klasa u CSS-u koji vam omogućuje da stilizirate elemente na temelju njihovih odnosa s roditeljskim i sestrinskim elementima. Možete ga koristiti za odabir jednog ili više elemenata na temelju njihovog izvornog redoslijeda. Drugim riječima, može se podudarati sa svakim elementom koji je novo dijete određene vrste svog roditelja.

Slovo n može biti ključna riječ (kao što je čudno ili čudno), broj ili formula.

Na primjer, za stiliziranje svake druge stavke odlomka sa žutom bojom pozadine, vaš CSS dokument bi uključivao:

p: nth-of-type (neparan) {
pozadina: žuta;
}

Započnite sa svojim HTML tablicom

Prvo izradite svoju tablicu kao što biste ga obično napisali u HTML formatu. Nemojte dodavati nikakve posebne razrede u retke ili stupce.

U svoj stilski obrazac dodajte sljedeći CSS:

tr: nth-of-tip (neparan) {
Pozadina boja: #ccc;
}

To će oblikovati svaki drugi red sa sivom bojom pozadine koja počinje prvim redom.

Stil zamjenjuju stupce na isti način

U tablicama možete napraviti istu vrstu stylinga u stupce. Da biste to učinili, jednostavno promijenite tr u CSS klasi na td. Na primjer:

td: nth-of-type (ak) {
Pozadina boja: #ccc;
}

Korištenje formula u n-tipu (n) Odabir

Sintaksa za formulu koja se koristi u izborniku je + b.

Na primjer, ako želite postaviti boju pozadine za svaki treći red, formula će biti 3n + 0. Vaš CSS može izgledati ovako:

tr: n-tip (3n + 0) {
pozadina: slategray;
}

Korisni alati za korištenje n-tipa selektora

Ako se osjećate pomalo zastrašujući aspektom formule korištenjem selektora pseudo-klase n-tipa, isprobajte: nth Tester web mjesto kao koristan alat koji vam može pomoći u definiranju sintakse kako biste postigli željeni izgled. Koristite padajući izbornik da biste odabrali nth-of-type (također možete ovdje eksperimentirati i s drugim pseudo-klasama, kao što je nth-child).