Sett celleavstand i CSS - HTML
Flere CSS -egenskaper brukes til å style bordet i HTML, for eksempel farge, grense, margin, polstring og mange flere. Dessverre "cellesport”Og“cellpadding”Attributter støttes ikke i HTML5. Imidlertid CSS "grense-avstand”Eiendom brukes til å stille celleavstand, og CSS”polstring”Eiendom er for å sette tabellcellenes cellepolstring.
Resultatene av innlegget er:
- Hvordan lage tabell i HTML?
- Hvordan sette cellepolstring i CSS?
- Hvordan sette celleavstand i HTML -tabeller ved hjelp av CSS?
Hvordan lage tabell i HTML?
For å lage en tabell i HTML, følg instruksjonene nedenfor:
- På HTML -siden, først, legg til en HTML “
”Element.
- Deretter legger du til
tag som brukes til å spesifisere overskriften med "Colspan”Attributtverdi”3”. Denne attributtet vil gjøre cellen lik tre kolonner. - Etter det, legg til noen
Tagger for å lage rader i en tabell. - Den første raden inneholder overskriftene med
Tagger. - Andre rader inneholder HTML
Tagger for å spesifisere kolonnene. Her er HTML -koden for å lage en enkel tabell:
Bord Rull nei Elevens navn Kurs 1 John Grunnleggende om c++ 2 Lisa Grunnleggende om Java 3 Diana Menneskelig datamaskininteraksjon La oss flytte til CSS -delen for å style bordet.
Stil “Tabell” -element
Tabell
Margin: Auto;
grensen: 2px solid #0e5e6f;
Bakgrunnsfarge: #FDF3E1;
Font-størrelse: 16px;
Forklaringen på ovennevnte CSS -egenskaper er listet opp nedenfor:
- “margin”Eiendom legger til mellomrom rundt elementet.
- “grense”Er en kortvarig eiendom som tilfører en grense rundt elementet ved å spesifisere grensebredden, grensestil og grensefarge.
- “bakgrunnsfarge”Eiendom bruker farge på elementets bakgrunn.
- “skriftstørrelse”Er egenskapen til å angi elementets skriftstørrelse.
Stil “th” og “td” elementer
th, td
Grense: 2px Solid #404258;
Bakgrunnsfarge: #9AD2D8;
HTML
og Elementer er stylet ved hjelp av "grensen" og "bakgrunnsfargede" egenskaper. Produksjon
La oss gå over for å sette celleavstand og cellepolstring av HTML -tabellen.
Hvordan sette celleavstand i CSS?
Som vi vet, støtter ikke HTML5 "cellesport”Og“cellpadding" attributter. Imidlertid CSS -eiendommen "grense-avstand”Kan sette avstanden mellom den tilstøtende cellens grenser som dette:
Tabell
grense-avstand: 15px;
Her er utgangen som viser effekten av “grense-avstand”Eiendom på bordelementet:
Hvordan sette cellepolstring i CSS?
For å angi cellepolstring i HTML -tabellen, CSS “polstring”Eiendom er spesifisert. Padding -egenskapen gir plass inne i cellens grense.
Nå, bruk CSS -polstringseiendommen på “th”Og“td”Tabellelementer som følger:
th, td
polstring: 10px;
Fra utgangen nedenfor kan det observeres at områdene blir lagt rundt cellens innhold:
Vi har samlet eksempler for å angi celleavstand og cellepolstring i HTML ved hjelp av CSS.
Konklusjon
HTML5 støtter ikke celleavstand og cellepolstringsattributter. For å stille inn disse faktorene, lag først en tabell i HTML og anvende CSS “grense-avstand”Eiendom og“polstring”Eiendom. CSS-grensenes eiendom brukes til å stille celleavstanden. Polstringen brukes imidlertid til å justere cellepolstringen. Dette innlegget har gitt detaljerte eksempler på hvordan du angir celleavstand og cellepolstring i CSS.
- Deretter legger du til