CSS celleavstand

I denne artikkelen vil vi gå over mange stilistiske alternativer som vil gi tabellkomponenter som tabelloverskrifter og tabelldataceller noe avstand. Det mest brukte CSS -attributtet i denne omstendigheten er grensavstandseiendommen som vil bli utforsket og implementert i denne opplæringen ved hjelp av Notisblokk ++ IDE. For å bruke denne forestillingen i en HTML -fil, vil mange stilistiske alternativer som Inline CSS og stilkoden CSS -metoden bli brukt.

Eksempel 01: Bruke CSS -stilkoden for å legge til avstand til tabellcellene i en HTML -fil

I dette eksemplet vil vi avstand til tabellcellene ved å bruke egenskapen til grenseavstand. I dette eksemplet vil stilkoden CSS -metoden bli brukt til å legge til stilistiske funksjoner i tabellkomponentene. Notisblokken ++ IDE vil bli brukt til å redigere HTML -filen.

I skriptet ovenfor vil vi starte med overskriften til filen der vi åpner stilkoden. I denne taggen vil vi gi to stylingegenskaper til alle elementene ved å generalisere elementene og lage separate klasser for dem. Først vil vi definere stylingen for hele tabellen der vi vil definere grenseavstanden som deretter vil tilordne et spesifisert mellomrom mellom innholdet i en celle og grensen.

Deretter vil vi lage en annen stylingklasse. I denne klassen vil vi gi styling til tabelloverskriften, borddata og selve tabellen, ved å definere grenselengden, form og farge. Deretter vil vi lukke stilen og hodemerket og åpne kroppskoden. I kroppskoden lager vi en tabell med to rader. I den første raden vil vi gi tabellen tre kolonner ved hjelp av "TH" -merket som definerer tabelloverskriften. I den andre raden vil vi sette inn innholdet i kolonnene i tabellen ved å bruke “TD” -koden. Deretter vil vi lukke tabellkoden og kroppskoden. Lagre dette skriptet i “.HTML ”-format lar oss åpne det i nettleseren vår og få følgende utdata:

Vi kan se i ovennevnte resultat at de forskjellige cellene i tabellen har en vanlig avstand mellom seg som ble bestemt i grenseavstandsattributtet inne i stilkoden.

Eksempel 02: Bruke den inline CSS -stiltilnærmingen for å legge til avstand til tabellcellene i en HTML -fil

I dette eksemplet vil vi bruke egenskapen til grenseavstanden og litt stil for å gi bordkomponenter som tabelloverskriften og borddataene noen avstand. Den inline CSS -tilnærmingen vil bli brukt i dette eksemplet for å anvende stilegenskaper på tabellkomponentene.

I skriptet ovenfor vil vi starte med kroppen til filen der vi vil åpne stilmerket i hvert element individuelt. Først åpner vi tabellmerket og tildeler CSS gjennom Style Nøkkelordet. Vi vil tilordne bordet med en kant av "1px" bredde, solid form og svart farge sammen med grenseavstanden. Deretter vil vi åpne vår første tabellrekke der vi skal definere kolonnenavnene ved å bruke "TH" -merket, der vi også vil bruke inline CSS for å gi stylingegenskaper til elementet. Etter dette vil vi legge til en annen rad der vi vil definere tabelldataene ved å bruke “TD” -koden og bruke inline CSS for å gi dataene også. Deretter vil vi lukke tabellen og kroppskoden. Vi lagrer denne filen og åpner den i nettleseren vår for å få resultatet av dette skriptet på nettleserens side.

I ovennevnte utdrag kan vi observere at begge radene på tabellen har noen mellomrom mellom seg som ble definert i taggene med inline CSS.

Eksempel 03: Bruke den to dimensjonsgrenseavstand CSS -teknikken for en tabell i en HTML -fil

I dette eksemplet vil vi bruke den doble dimensjonen grenseavstandsattributt for å gi tabellcellene noe avstand. I dette eksemplet vil stilkoden CSS -teknikken bli brukt til å bruke stilistiske funksjoner på tabellkomponentene.

I det følgende skriptet begynner vi med filens overskrift der vi åpner stilmerket. Ved å generalisere komponentene og etablere forskjellige klasser for hver, vil vi gi dem alle to stilparametere i denne taggen. Først vil vi lage stilen for hele tabellen, inkludert grensen.

Deretter, i en annen stilklasse, vil vi bruke styling på tabelloverskriften, borddata og selve tabellen ved å sette grenselengden, form og farge. Stil- og hodemerkene vil da være lukket mens kroppskoden blir åpnet. Vi skal lage et bord med to rader i kroppskoden. "TH" -merket vil bli brukt i første rad for å spesifisere tabelloverskriften. Og "TD" -merket vil bli brukt i den andre raden for å sette inn data i tabellens kolonner. Deretter vil vi lukke tabellen og kroppskoder som lagrer dette skriptet i “.HTML ”-format slik at vi kan kjøre det i nettleseren vår og få følgende resultater:

I output ovenfor kan vi se at de enkelte cellene i tabellen har to forskjellige hull horisontalt og vertikalt mellom dem som ble definert i grenseavstanden i stilkoden.

Eksempel 04: Bruke den alternative metoden for å tilordne rom mellom tabellelementer

I dette eksemplet vil vi bruke alternativet til grensavstand for å gi litt stil til bordkomponenter som tabelloverskrift og tabelldata. Style Tag CSS -tilnærmingen vil bli brukt i dette eksemplet for å tilordne stilistiske attributter til tabellkomponentene.

I det følgende skriptet starter vi med filens overskrift og åpner stilen Tag-by Summarizing the Components og tildeler en enkelt klasse til hver del. Først vil vi designe stilen for hele bordet, inkludert grensekollapsfunksjonen, som kollapser grensen til hvert element for å legge til mellomrom mellom dem. Tabelloverskriften, tabelldataene og tabellen i seg selv vil bli stylet ved å justere grenselengden, formen og fargen. Kroppskoden vil da bli åpnet, men stil- og hodemerkene vil være lukket.

I kroppskoden lager vi en tabell med to rader. "TH" -merket, som spesifiserer tabelloverskriften, vil bli brukt i første rad for å gi tabellen tre kolonner. "TD" -merket vil bli brukt i den andre raden for å legge informasjon i tabellens kolonner. Deretter vil vi lukke tabellen og kroppskodene. Vi lagrer dette skriptet i “.HTML ”-format slik at vi får tilgang til det i nettleseren vår og mottar følgende utdata:

I output ovenfor er det synlig at tabellelementene har en enkelt grense med litt plass på grunn av grensekollapsegenskapen.

Konklusjon:

I denne artikkelen diskuterte vi flere stylingegenskaper som hjalp oss med å gi tabellcellene noe avstand. Grenseavstandseiendommen er den mest brukte eiendommen i dette scenariet som ble diskutert og implementert i denne artikkelen ved hjelp av Notisblokk ++ IDE. Vi har lagt til tre unike eksempler sammen med deres forklaring på hvert trinn for brukervennlighetene våre.