CSS -bord alternativ radfarge

Vi kan fargelegge de alternative radene for å gjøre bordet vårt mer brukervennlig og la brukeren raskt skumme dataene. Vi kan bruke CSS -egenskapen til å endre fargen på de alternative radene for å trekke brukerens oppmerksomhet til dem. En stilvelger i CSS brukes til å endre de alternative radene. Ved hjelp av CSS -stilvelgeren kan du enkelt endre fargen på de alternative radene. Nth-Child () -velgeren i CSS tar en jevn eller merkelig parameter og endrer deretter fargen ved å bruke bakgrunnsfargegenskapen i denne stilvelgeren. I denne opplæringen vil vi endre fargen på de jevn og rare radene på flere måter.

Syntaks:

Eksempel nr. 1:

Lag en HTML -fil for å lage tabeller med rader og kolonner. Bruk CSS -stilvelgeren for å endre fargen på de alternative radene. Visual Studio -koden er programvaren vi bruker for å kjøre disse eksemplene. Som et resultat må vi opprette en HTML -fil og legge inn HTML -koden for å lage tabellen. HTML -koden for å bygge bordet kan sees her, og filen må lagres med ".HTML ”utvidelse.

Her lager vi en tabell og befolker radene og kolonnene med data. “”Brukes til å definere tabellens toppceller,“”Brukes til å definere tabellens rad, og“”Brukes til å lage datacellen i rader. Da, inne i “”Tag, vi legger dataene til disse cellene, og disse“”Tagger er inne i“”Tag, som representerer en rad. Vi befolker alle radene med dataene. Etter at vi har generert denne enkle tabellen, må vi style det og endre fargen på de alternative radene ved å bruke stilvelgeren.

Den gitte koden brukes til å fargelegge de alternative radene på tabellen som vi genererte. Fordi det er vår CSS -fil der vi bruker CSS -stilvelgeren for å endre den alternative fargen på rader, lagres den med ".CSS ”Fil Extension. Vi bruker egenskapen "grensekollaps" for å style tabellen først, som kontrollerer om bordets grense kollapser til en enkelt kant eller om den er delt. Vi konfigurerer det til å "kollapse" i dette tilfellet. Som et resultat av utnyttelse har vi nå en enkelt bordgrense. Denne bordets bredde er satt til “100 prosent.”

Deretter er det henholdsvis "TH" og "TD" som representerer henholdsvis overskriften og enkle celler. Stil disse ved å bruke den "tekst-align" -egenskapen som justerer teksten i cellene til "venstre" mens vi setter den. Vi setter også "polstring" til "8px". Etter dette, for å endre fargen på de alternative radene, bruker vi CSS-stilvelgeren som vi gir til egenskapen “: Nth-Child ()”. Derfor endres fargen på de jevn radene. Egenskapen "bakgrunnsfarge" brukes her for å endre fargen på den jevne raden til "lysegrå", og koden for denne fargen er "#F2F2F2".

Ved å trykke på “Alt+B” inne i HTML -filen som vi utarbeidet tidligere, vises utgangen på skjermen. De jevn radene vises i en annen farge, da vi bruker stilvelgeren på tabellens jevn rad.

Eksempel 2:

I dette eksemplet endrer vi fargen på de rare radene i forrige tabell som vi konstruerte i det første eksemplet. Vi endrer ikke bordet; Vi endrer bare radfargen på de rare radene her. Bordets bredde er “100 prosent.”Da har vi“ TH ”og“ TD ”. Vi setter "tekst-align" til "igjen.”Teksten inne i tabellens celler er plassert på cellens venstre side. "Polstringen" skaper et mellomrom mellom tabellens grense og dataene som er skrevet innenfor cellene i tabellen.

Så denne "polstringen" er satt til "10px". Den brukes til å lage en "10px" -buffer mellom bordets innhold og grensen. Vi justerer nå fargen på bordets "rare" rader. Så vi bruker egenskapen “Nth-Child ()” her. Fargen på de jevne radene endres hvis vi gir den til egenskapen “: nth-child ()”. Her brukes egenskapen "bakgrunnsfarge" til å endre fargen på den jevne raden til "lysegrå" ved å bruke fargekoden "#F2F2F2.”

Du kan se at fargen på de rare radene endres i denne utgangen fordi fargen på de alternative "rare" radene endres. Og bakgrunnsfargen på bare de rare radene blir grå.

Eksempel nr. 3:

I vårt tredje eksempel bruker vi den samme CSS -stilvelgeren som vi brukte i de tidligere kodene for å endre fargene på både jevn og rare rader. Imidlertid bruker vi ett enkelt bord og endrer fargen på de jevnlige som de rare radene. Her er fargen på "grensen" "svart". Bredden på grensen er omtrent "2px". Og typen av grensen er solid i "grensen" -egenskapen til CSS.

Dessuten er grensen "kollapset", så den ser ut som en enkelt grense. “100%” er valgt som “bredde”. Deretter har vi "TH" og "TD" og justerer teksten til "senteret" ved å bruke "tekst-align". Vi bruker "6px" -polstringen for disse. Igjen er grensen for overskriften og cellene satt til "2px" "bredde", "solid" type og "svart" farge. Fargen på radene endres når vi bruker stilvelgeren. Stilvelgeren brukes på det "jevn" antallet rader. Vi setter radens bakgrunnsfarge for de jevn radene til "gulgrønn" med det første. Vi ønsker også å endre fargen på de "rare" radene, så vi bruker denne stilvelgeren igjen, og denne gangen legger vi "rare" som parameteren til "nth-child ()" -velgeren og setter sin "bakgrunn- farge "til" lysegrønn ". Som et resultat endres fargen på de rare radene til "lysegrønn".

De alternative radene i denne utgangen er farget annerledes. De jevn radene er gulgrønne, mens de rare radene er lysegrønne. Ved å bruke CSS -stilvelgeren, kan du endre fargen på de alternative radene.

Eksempel 4:

Dette er vårt siste eksempel, og vi skal lage en ny tabell som inneholder fire kolonner og seks rader. Nå bruker vi de to velgerne her i denne koden for å endre jevn radfarge så vel som den rare radfargen.

Her styler vi overskriften litt ved å bruke egenskapen "tekst-align" og sette den til "senteret". Vi setter også "font-family" til "algerisk" font. Fontets "farge" på denne overskriften er "rød". "Tabellen" -fonten er satt til "Arial" og "grensekollaps" er også satt til "kollapset" i dette eksemplet. "Bredden" er satt til "100px". Egenskapene som brukes her for "TH" og "TD" er de samme som i de forrige eksemplene. Her er den "jevn" radfargen satt til "lysegrønn" og den "rare" radfargen er satt til "Light Sea Green" ved å bruke "Nth-Child ()" -velgeren.

Utgangen er gjengitt nedenfor, og du vil observere at de jevne radene har samme farge og de rare radene er i samme farger også. Dette er resultatet av å bruke "nth-child ()" -velgeren i vår CSS-kode.

Konklusjon

Denne guiden demonstrerte hvordan du endrer de alternative radfargene ved å bruke CSS nth-Child () -velgeren. Vi dekket hvordan det fungerer med et rart antall rader så vel som med et jevnt antall rader. Vi brukte egenskapen "bakgrunnsfarge" som brukes til å endre fargen på rader. Vi benyttet nth-child () -velgeren for å bruke de forskjellige fargene på de alternative radene i denne guiden, og vi har gått over hver kode i dybden. Vi inkluderte også HTML- og CSS -koden så vel som utdataene. Som et resultat får du mye kunnskap om CSS -konseptet med å endre fargen på de alternative radene.