Hvordan stylebord med CSS

Denne studien vil veilede relatert til stylingbord med CSS.

Hvordan stylebord med CSS?

For å bruke stiler på bordet, vil vi gå gjennom serien med trinn gitt nedenfor.

Trinn1: Lag en tabell i HTML

For å lage en tabell i HTML, brukes følgende HTML -elementer:

• “”Element brukes til å lage en tabell i HTML.
  “”Element brukes til å legge til en bildetekst til bordet.
  “”Brukes til å spesifisere tabellens overskrift, som vanligvis inneholder overskriftene.
  “
  ”Brukes til tilleggsraden.
  “
  ”Angir kroppsdelen av tabellen.

  Det opprettede bordet ser for øyeblikket slik ut:

  La oss komme videre for å se hvordan du kan style denne tabellen.

  Trinn 2: Stil "kropp" -element

  kropp
  Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
  bakgrunnsfarge: RGB (233, 233, 233);
  

  Elementet brukes med følgende CSS -stylingegenskaper:

  • “Font-familie”Eiendom med verdien”Verdana, Genève, Tahoma, Sans-serif”Brukes til å bruke skriften som støttes av nettleseren. Hvis nettleseren ikke støtter den første skriftstilen, vil den andre brukes.
  • “bakgrunnsfarge”Eiendom setter elementets bakgrunnsfarge.

  Trinn 3: Stil "bildetekst" -element

  Bildetekst
  Font-størrelse: 25px;
  tekst-align: sentrum;
  Bakgrunnsfarge: #1C6758;
  Farge: Cornsilk;
  

  Elementet er stylet som følger:

  • “skriftstørrelse”Eiendom brukes til innstillingen av skriftstørrelsen.
  • “Tekstalign”Eiendom spesifiserer justeringen av elementets tekst.
  • “farge”Eiendom refererer til elementets skriftfarge.

  Her er utdataene fra ovennevnte kode:

  Trinn 4: Legg kant til bordet
  “grense”Eiendom brukes til å legge til en grense rundt elementet. Det er en shorthand -eiendom som spesifiserer grensebredde, grensestil og grensefarge.

  La oss bruke grensen, sammen med polstring og margin på bordet:

  Tabell, TH, TD
  Grense: 2px Solid #1C6758;
  polstring: 1px 6px;
  Margin: Auto;
  

  Her:

  • “grense”Eiendom justerer grensen rundt bordet, ved å spesifisere grensebredden, grensestilen og grensefargen.
  • “polstring”Angir plassen rundt elementets innhold, der den første verdien definerer plass i toppbunnen og den andre verdien gir plass til høyre-venstre side av innholdet.
  • “margin”Eiendom med verdien”bil”Legger til lik plass rundt elementet.

  Produksjon
  

  Merk: Hvis vi ikke vil ha mellomrommene mellom bordgrensene, bruk grensekollapsegenskapen.

  Trinn 5: Kollaps grenseavstand fra bordet
  Rommene mellom bordgrensene kan fjernes ved å bruke "grensekollaps”Eiendom med verdien“ kollaps ”:

  Border-Collapse: kollaps;

  Trinn 6: Juster tabellstørrelsen
  La oss se hvordan du justerer tabellstørrelsen:

  tead th
  Bredde: 160px;
  

  Den lagt til “bredde”Eiendom med

  Få tilgang til cellen ved å bruke klassenavnet i CSS -filen:

  .fremheve
  Bakgrunnsfarge: #0F90D5;
  

  “.fremheve”Refererer til klassehøydepunktet i

  ”Spesifiser overskriftinnholdet. “
  elementet vil automatisk justere tabellstørrelsen i henhold til det :: Vi kan også bruke stiler på den spesifikke tabellcellen. La oss diskutere dem! Trinn 7: Stilspesifikke tabellceller For å style den spesifikke tabellcellen, spesifiser klassenavnet til den aktuelle cellen. For eksempel representerer koden nedenfor at den tredje cellen på den andre raden tildeles et klassenavn "fremheve”:	99	element. Dette elementet brukes med "bakgrunnsfarge”Eiendom for å spesifisere fargen på bakgrunnen. Som vi kan se, er den spesifiserte tabellcellen vellykket stylet: Trinn 8: Angi fontfamilien og størrelsen på tabellen Tabell Font-family: Cursive; Font-størrelse: 18px; tekst-align: sentrum; Følgende CSS -egenskaper brukes på tabellelementet: “Font-familie”Eiendom setter elementets fontstil. “skriftstørrelse”Eiendom brukes til innstilling av elementets skrift. “Tekstalign”Eiendom brukes til å justere tekstjusteringen. Her er utgangen: Trinn 9: Fargestyrer i rekkefølge Det er også lov å bruke stiler på spesifikke rader eller kolonner. For eksempel er de jevn radene stylet ved å følge nedenfor -formatet: \ tbody tr: nth-child (til og med) bakgrunnsfarge: #FFB200; Her: “: nth-barn (til og med)”Pseudo -velgeren brukes til å ta ett argument som spesifiserer mønsteret som stylingen skal brukes. “bakgrunnsfarge”Eiendom brukes til å stille inn elementets bakgrunnsfarge. Det kan observeres at bakgrunnsfargen blir brukt på de jevn radene: Det handlet om stylingbord med CSS Konklusjon Tabeller er et viktig verktøy for å holde dataene organisert. Tabellen kan opprettes ved å bruke HTML , , og flere elementer. Flere CSS-egenskaper brukes til å stilisere bordet, for eksempel grense, bakgrunnsfargede eiendommer, fontfamilieegenskaper og mange flere. For bedre forståelse har denne oppskrivningen forklart en trinn-for-trinn-prosedyre for å style et bord med CSS. « Hvordan merke en eldre forpliktelse i git? Hvordan løse “-Squash støttes bare på Docker Daemon med eksperimentelle funksjoner aktivert” Docker Feil » Salesforce Salesforce Apex - Guvernørgrenser Opplæring om hva guvernørgrensene er og hvordan de kan håndteres for forskjellige scenarier ved å br... Elias Krogh Svendsen Kraftskall Get-ChildItem listefiler, register og sertifikater Cmdlet “Get-Childitem” får varer og barnegjenstander fra en eller flere spesifiserte steder. Dessute... Martin Berge Bash -programmering Hva er variabel interpolasjon i skallskripting Variabel interpolasjon er prosessen med å erstatte verdien av en variabel med innholdet. Les denne g... Daniel Berntsen Docker Docker Engine -plugins Martin Berge Docker Hvordan kan jeg installere Docker via Ubuntu Terminal? Daniel Berntsen Kraftskall Hvordan bruke “Writ-output” cmdlet i PowerShell? Elias Krogh Svendsen MS SQL Server Hva er mysql rdbms en omfattende guide Mathias Halvorsen C ++ Forskjell mellom privat og beskyttet i C ++ Daniel Berntsen PHP Hvorfor PHP skal brukes i nettutvikling Daniel Johnsen Golang Hva er Golang Testing Package? Oskar Fossum C skarp Hva betyr PLUS-Equals-operatøren i C#? Elias Aalerud Aasen Kraftskall Hvordan installere Windows PowerShell Mathias Halvorsen Java Java Treemap eksempler Alexander Sørlie ,