Hva er tabellcellepolstring i CSS

Som standard har en tabell veldig smale celler, noe som kan føre til synlighetsproblemer. For å unngå dette, foretrekker vi å bruke CSS -polstringsegenskapen for å putte cellene i en tabell. Polstring gjør celler bredere og større enn standardstørrelsen. Som et resultat vil tabellen se bra ut med en klar datapresentasjon.

I denne oppskrivningen vil vi beskrive hvordan du bruker cellepolstring i en tabell i CSS.

Hvordan bruke tabellcellepolstring i CSS?

I CSS, “polstring”Eiendom legger til tomrom rundt elementinnhold. Det brukes også til å kontrollere plassen fra hver side. For eksempel kan polstring fra bare venstre side legges til ved hjelp av padding-venstre-egenskapen. Tilsvarende kan padding-høyre, padding-top og padding-bottom-egenskaper brukes til å skape plassen rundt elementets innhold fra henholdsvis høyre, topp og bunn.

Følg det gitte eksemplet for å legge til polstring i tabellcellen.

Eksempel 1: Legg til polstring i tabellceller ved hjelp av padding -egenskap

På vår HTML -side har vi et bord med veldig smale blokker. La oss legge til litt plass i blokkene på tabellen:

Her er den nåværende HTML -koden for vår webside:

Linux	Hint
LLC	USA

La oss nå ta "td”Eller tabelldatacelle sammen med tabellen og bruke“grensestil”Eiendom som“fast”. På denne måten kan du få grensen rundt bordet og innholdet. I neste trinn, bruk "polstring”Eiendom med verdien”1REM”. Som et resultat vil tabellcellen bli lengre og bredere:

Lagre HTML -filen din og start den på nettleseren for å se resultatet:

Som du kan se, er polstring blitt lagt til med suksess i tabellcellen:

Eksempel 2: Juster polstring i tabellceller fra hver side

I dette eksemplet vil vi plassere teksten vår øverst på venstre hjørne av cellen. For det vil vi tildele "polstring”Eiendomsverdi som“0px 35px 30px 0px”, Hvor den første 0px er for toppen, andre 35px -verdien er for høyre, 30px for bunnen og fjerde verdi 0px er for venstre sidepolstring:

Produksjon

Vi har forklart deg hva tabellcellepolstring er og hvordan du bruker den.

Konklusjon

Tabellceller har begrenset plass som standard, og dette kan forårsake lesbarhetsproblemer for betrakteren. For dette, CSS “polstring”Eiendom brukes til å legge litt plass til tabellcellen. I denne guiden har vi hjulpet deg å forstå hva tabellcellepolstring er. Videre har vi også vist forskjellige eksempler relatert til å legge cellepolstring ved hjelp av CSS.