Cellepolstring er definert som rommet midt i dataene til cellen og grensen. Når vi legger dataene i cellene i tabellen, må vi lage rom mellom cellens grense og dens data. Denne avstanden er kjent som cellepolstring i CSS. Vi kan stille inn cellens venstre polstring, høyre polstring, topp polstring og bunnpolstring hver for seg, samt kombinert polstring for alle sider. Hvis vi ikke setter denne cellepolstringen i tabellcellene våre, vil den bli satt som standard i henhold til dataene fra cellene. Vi har forskjellige egenskaper i CSS for å sette denne cellepolstringen.
Ved å bruke "polstring" -egenskapen justerer den polstringen på alle fire sider inne i cellen. Men hvis vi bare vil stille polstringen på den ene siden, har vi også egenskapene for å sette dette. I denne guiden vil vi utforske egenskapen til cellepadding i CSS og vil utføre eksempler her hvor vi vil bruke disse egenskapene.
Egenskaper for cellepolstring i CSS:
Polstring: verdi.
Padding-venstre: verdi.
Padding-høyre: verdi.
Padding-top: verdi.
Padding-Bottom: Verdi.
Eksempel nr. 1:
Ettersom vi må bruke cellepolstringsegenskapene på tabellcellene våre, så må vi konstruere tabellen. Først vil vi bruke disse egenskapene på den. Vi kan lage tabellen i HTML ved å legge til noen tagger som brukes til å konstruere tabellen. Her skal vi konstruere en tabell i HTML ved å åpne filen. Etter å ha lagt til grunnleggende tagger av HTML, begynner vi å konstruere tabellen i kroppen til HTML -koden. Vi legger “
" stikkord. I denne taggen skal vi opprette overskriften ved å bruke “TR” og deretter “TH” -koden. I "th" -merket legger vi til noen data her. Deretter bruker vi igjen “TR” for hver rad.
Deretter bruker vi "TD" -merket i denne "TR" -merket. Og legg til data i denne "TD", slik at den vil legge til data til radene i tabellen. Etter å ha fullført denne koden, må vi lagre den med ".HTML ”Fil Extension, og vi må koble denne filen med CSS -filen i" hodet "på denne HTML -filen. Vi vil bruke denne tabellen i alle eksempler i denne guiden, men bruker forskjellige cellepolstringsegenskaper i hvert eksempel. Nå, etter å ha lagret dette, kommer vi til å gå mot CSS -filen der vi vil bruke CSS -egenskaper. Så alle disse egenskapene vil gjelde her i denne tabellen.
Vi har laget en overskrift i HTML. Så her skal vi style det litt ved å bruke egenskapen "farge". Vi setter skriftfargen til “Maroon”. Deretter setter vi også "font-family" og bruker "algerier" som verdien av denne egenskapen. Bruk deretter “2px” -grensen på hele bordet. Typen er satt her til “solid” og fargen på “grensen” er “maroon”.
Deretter er "bredden" på tabellen satt. Vi legger "auto" her slik at bredden automatisk justeres i henhold til dataene. Etter dette er egenskapen "Border-Collapse" her, og det er "kollaps". Så, grensen til bordet vil bli kollapset. Nå må vi lage en grense for hver celle. Så for dette bruker vi igjen "grensen" -egenskapen for "TH" og "TD". Dataene som er skrevet i disse cellene er satt til den "svarte" fargen i "farge" -egenskapen.
Nå setter vi cellepolstring ved hjelp av "polstring" -egenskapen i CSS og setter "15px" polstring her. Det vil skape et 15px -mellomrom mellom cellen og dataene fra toppen, venstre, bunn og høyre side. Hvis vi vil bruke den samme polstringen på alle fire sider, bruker vi denne "polstring" -egenskapen. Denne ene egenskapen bruker polstring på alle sider.
I denne utgangen, legg merke til at det er et mellomrom mellom teksten som er skrevet inne i cellen og grensen til denne cellen. Plassen fra alle fire sider er lik. Dette er cellepolstring i CSS, og denne "polstring" -egenskapen setter lik polstring på alle sider.
Eksempel 2:
Her er koden den samme som vi diskuterte i det første eksemplet. Vi endrer bare "fargen" på overskriften og fargen på "grensen" til cellen til "grønn". Når vi bruker denne egenskapen "Padding-Left", vil den bare justere cellepolstringen på venstre side. Vi setter verdien av "Padding-Left" til "60px". Det vil skape 60px plass på venstre side av cellens data og cellens grense.
I denne utgangen er det et rom på venstre side mellom dataene og grensen til alle celler. Dette er fordi vi bruker egenskapen "Padding-Left" her. Så det skaper ønsket rom bare på venstre side, og det bruker ikke denne polstringen på de resterende tre sidene.
Eksempel nr. 3:
I dette eksemplet endrer vi ganske enkelt "fargen" på overskriften, fargen på cellens "grense" og bordet til "oransje". Når vi bruker egenskapen "Padding-Right", påvirker den bare polstring av celler på høyre side. Det vil gjøre et mellomrom mellom dataene som er til stede inne i cellen og cellens høyre kant. Verdien av "Padding-Right" her er satt til “50px.”Det vil etterlate et 50px gap mellom cellens data og cellens grense på høyre side.
Du kan se at det bare er et rom på høyre side mellom dataene og grensen til alle celler. Dette skyldes at egenskapen "polstring" som brukes. Som et resultat skaper det bare den nødvendige polstringen på høyre side og ignorerer de resterende tre sidene.
Eksempel 4:
Her endrer vi ganske enkelt "fargen" på overskriften, "grensen" til cellene og bordgrensen til "blå". Vi bruker CSS-eiendommen “Padding-Top” akkurat nå. Egenskapen "Padding-Top" påvirker bare polstring av celler på toppen når den brukes. "Padding-top" er satt til "55px" i dette tilfellet. På toppen vil det være et 55px gap mellom cellens data og cellens grense.
Her, på oversiden av hver celle er det et mellomrom mellom dataene og cellegrensen. Dette skyldes bruken av "Padding-Top" -egenskapen. Som et resultat tilfører det bare nødvendig polstring til oversiden.
Eksempel 5:
Nå endrer vi "fargen" på overskriften, "grensen" til cellene og tabellen til "lilla". Vi bruker CSS-egenskapen, "Padding-Bottom". Når "padding-bottom" -attributtet brukes, setter den bare polstring av celler på bunnen. Det vil lage en cellepolstring mellom dataene inne i cellen og cellens bunngrense. I dette scenariet er "padding-bottom" satt til "53px".
Her kan du observere rommet mellom dataene inne i cellen og den nederste grensen til cellen. Når vi bruker egenskapen "Padding-Bottom", legger den bare cellepolstringen på bunnen av cellen.
Konklusjon:
Denne guiden har forklart cellepolstringskonseptet i CSS i detalj. Vi har diskutert forskjellige polstringsegenskaper her, og vi har brukt disse egenskapene i forskjellige CSS -koder. Vi slo fast at vi i CSS justerer cellepolstring på alle sider av cellen ved å bruke "polstring" -egenskapen og bruke polstring på den ene siden bare ved å bruke forskjellige polstringsegenskaper. Vi så på en rekke koder der vi har brukt disse egenskapene, samt effekten av disse egenskapene på tabellcellen. Du vil stille cellepolstringen etter å ha lest denne guiden grundig.
