CSS alternativ radfarge

Vi kan legge til farge til de alternative radene for å gjøre tabellen mer forståelig for brukeren, slik at brukeren enkelt kan skanne dataene. Vi kan endre fargen på de alternative radene ved å bruke CSS for å få mer oppmerksomhet fra brukeren. I CSS har vi en stilvelger for å endre de alternative radene. Det er veldig enkelt å endre fargen på de alternative radene ved hjelp av CSS -stilvelgeren. Den har nth-child () -velgeren som får de jevn eller rare radene som en parameter og deretter bruker bakgrunnsfargegraden i denne stilvelgeren for å endre fargen. I denne guiden vil vi vise deg hvordan du bruker CSS -stilvelgeren for å endre fargen på alternative rader. Vi vil endre fargen på jevn og rare rader annerledes i denne guiden.

Syntaks:

Syntaksen til stilvelgeren for å endre fargen på alternative rader er som følger:

: nth-child (til og med eller merkelig)
CSS -erklæring;

Eksempel 1: Endre fargen på jevn rader

Lag HTML -filen for å lage tabeller som inneholder rader og kolonner og endre fargen på de alternative radene ved å bruke CSS -stilvelgeren. Programvaren vi bruker for å utføre disse eksemplene er Visual Code Studio. Vi må generere HTML -filen og skrive koden til HTML som vi bruker for å lage tabellen. Du kan se koden for å lage tabellen i HTML, og denne filen må lagres med ".HTML ”Fil Extension.

Her skal vi designe en tabell og legge til dataene i radene og kolonnene i tabellen. “”Brukes til å definere toppcellene i tabellen. “”Brukes til å definere radene i en tabell. Og "”Er å lage datacellen i rader. Vi legger til seks rader og tre kolonner i en tabell. Den første raden er overskriften, så vi bruker “

---

”Med toppcellene. Så legger vi til dataene i disse cellene i "" stikkord. Disse “”Tagger er inne i“”Som representerer en rad. Vi legger deretter til dataene i alle rader.

Når denne tabellen opprettes, styler vi deretter denne tabellen og endrer fargen på de alternative radene. For dette skal vi designe CSS -filen i denne følgende visuelle studiokoden:

CSS -kode:

Denne koden er for å fargelegge de alternative radene på tabellen vi opprettet. Denne filen vil bli lagret med ".CSS ”Fil Extension. Vi vil bruke CSS -filen for å bruke CSS -stilvelgeren for å endre den alternative fargen på rader.

Vi styler bordet ved å bruke egenskapen "grense-kollaps" som definerer om grensen til bordet kollapser til en enkelt grense eller er atskilt. Her satte vi det som "kollaps". Ved å bruke denne egenskapen har vi en enkelt kant av bordet. Bredden på denne tabellen er satt til “100%”. Så kommer “TH” og “TD” som representerer toppcellene og de enkle cellene. Nå styler vi disse ved å bruke "tekst-align" som justerer teksten i cellene til "venstre" når vi setter den til "venstre". Så bruker vi stilvelgeren til CSS for å endre fargen på de alternative radene. Vi bruker “: nth-child ()”, så det vil endre fargen på tabellens jevn rad. Vi plasserer den "lysegrønne" fargen som bakgrunnsfarge på de jevn radene ved å bruke CSS bakgrunnsfargede egenskaper.

Produksjon:

Utgangen er gjengitt på skjermen ved å trykke på “Alt+B” inne i HTML -filen som vi tidligere har opprettet. Utgangen viser den grønne fargen for alle jevn radene når vi bruker stilvelgeren på tabellens jevn rad.

Eksempel 2: Endre fargen på rare rader

I dette eksemplet skal vi endre fargen på de rare radene i forrige tabell som vi designet i det første eksemplet.

CSS -kode:

Bordgrensen er kollapset her, så den ser ut som en enkelt grense. Bredden på tabellen er “110%”. Den "tekst-align" brukes til justering av teksten. Den plasserer teksten i cellene vi ønsker. Vi setter "tekst-align" til "senteret", så plasseres teksten i midten av cellen. "Padding" genererer rommet mellom grensen til bordet og innholdet skrevet i tabellen. Denne "polstringen" er "10px", så den brukes til å generere et "10px" -rom mellom innholdet i tabellen og grensen. Vi gir deretter "rare" til stilvelgeren. Vi setter den "rosa" fargen som bakgrunnen for de rare radene, og fargen på de rare radene vil bli gjengitt som "rosa". La oss sjekke følgende utdata:

Produksjon:

Her ser vi at bakgrunnsfargen på de rare radene blir rosa fordi vi endret fargen på de alternative radene.

Eksempel nr. 3: Endre fargen på både jevn og rare rader

I vårt tredje eksempel vil vi endre fargene på både jevn og rare rader ved å bruke samme stilvelger av CSS som vi også brukte i de tidligere eksemplene. Men her vil vi bruke både jevn og merkelig på enkeltbordet.

CSS -kode:

Bredden er valgt som “100%”. Grensen er innstilt på å "kollapse". Polstringen er valgt som “7px”. "Grensen" er "svart" i fargen, om "2px" i bredden, og grensetypen som er opprettet er "solid". Først setter vi radens bakgrunnsfarge som "rosa", men når vi bruker stilvelgeren, vil fargen på radene endre. Vi bruker stilvelgeren på det "rare" antall rader. Dette vil endre fargen på de rare radene i bordet vårt. Vi ønsker å endre de rare radernes bakgrunnsfarge til lyseblå, så vi bruker "bakgrunnsfargen" -egenskapen som er levert av CSS og setter "fargen" til "lyseblå". Deretter endrer vi også fargen på "jevn" radene til "gulgrønn". Vi bruker den samme stilvelgeren igjen, og denne gangen bruker vi den til å endre fargen på de jevn radene. ved å legge den "gulgrønne" fargen for jevn rader.

Produksjon:

I denne utgangen viser de alternative radene forskjellige farger. De rare radene er lyseblå og de jevne radene er gulgrønne. Dette er måten å endre fargen på de alternative radene ved å bruke CSS -stilvelgeren.

Konklusjon

Denne guiden forklarte konseptet med å endre de alternative radfargene ved å bruke CSS nth-Child () -velgeren. Vi forklarte hvordan det fungerer med det odde antallet rader og også med det jevnt antall rader og hvordan det endrer fargen ved å bruke bakgrunnsfargeegenskapen. I denne guiden brukte vi nth-child () -velgeren og brukte forskjellige farger på de alternative radene, og forklarte hver kode i detalj. Vi ga HTML så vel som CSS -koden sammen med dens respektive utgang.