CSS Colspan

"I denne artikkelen vil vi se på Colspan -egenskapen, som er tilgjengelig i CSS -katalogen og kan brukes på et bord. Colspan -egenskapen brukes til å spenne kolonner i en tabell i en enkelt celle ved å kombinere dem til en enkelt enhet. Denne egenskapen kan brukes på både tabellelementene, som er tabelloverskrift og tabelldataerker. CSS lar oss også bruke denne egenskapen med andre egenskaper i samme tagge, som vi også vil implementere i denne artikkelen.”

Eksempel 01: Bruke CSS Colspan -egenskapen på tabelldatagoden i en HTML -fil

I dette eksemplet vil vi bruke Colspan -egenskapen som CSS gir for å spenne over to kolonner i en tabell som vil være tabelldata i dette tilfellet. Vi vil bruke denne egenskapen direkte inne i TD -taggen for å spenne en rad i en enkelt celle i en tabell.

I dette skriptet åpner vi overskriften og starter med stilkoden for å gi styling til bordet og dets elementer som tabelloverskriften og tabelldataene. Etter å ha levert stylingegenskaper, åpnes taggen for kroppen på siden. I Body -taggen vil vi opprette tabellen vår med fire rader ved hjelp av TR -taggen. I første rad vil vi legge til overskriften på tabellen ved hjelp av taggen. Deretter, i andre og tredje rad, vil vi legge data i tabellens kolonner ved hjelp av TD -taggen.

Da vil vi legge til en annen rad der begge kolonnene i tabellen blir slått sammen ved hjelp av Colspan -egenskapen. Colspan -egenskapen er definert i tabelldatagoden ved å bruke Colspan -nøkkelordet med antall kolonner som vi ønsker på tabellen vår som argument. I denne raden vil vi legge til summen av tabellelementene i de to foregående radene. Etter dette vil vi lukke de gjenværende taggene og åpne filen i nettleseren vår ved å bruke ".HTML ”-format.

Som vi kan se i utgangen over, har vi lagt til fire rader i tabellen, med den siste raden som består av en enkelt celle som består av to kolonner på grunn av Colspan -egenskapen som er lagt til i TD -taggen.

Eksempel 02: Bruke CSS Colspan -egenskapen på tabellen i en HTML -fil

I dette eksemplet vil vi bruke CSSs Colspan -eiendom for å spenne tabellkomponenter, som vil være tabelloverskriften i dette tilfellet. Denne attributtet vil bli brukt nettopp inne i TH -taggen for å spenne en rad i en enkelt kolonne i en tabell.

Vi åpner topptaggen og begynner med stilkoden for å style tabellen og dens funksjoner, for eksempel tabelloverskriften og tabelldataene i dette skriptet. Taggen for sidens kropp vil bli åpnet etter å ha levert stilattributter. Ved hjelp av TH -elementet vil vi legge til tabellen på vei til første rad. Colspan -egenskapen vil da bli brukt til å kombinere begge tabellens kolonner i denne raden. Colspan -egenskapen vil bli spesifisert i tabelloverskriften ved å bruke Colspan -nøkkelordet med antall kolonner på tabellen vår som en inngang. Denne tabellens overskrift vil fungere som en kollektiv overskrift for hele bordet.

Vi har lagt til tre rader i tabellen, som indikert i resultatet over, hvorav den første er en enkelt celle som består av to kolonner på grunn av Colspan -attributtet som brukes i TH -taggen, noe som gjør det til en vanlig overskrift for alle tabellkomponenter.

Eksempel 03: Bruke CSS Colspan -egenskapen på topptabellen og tabelldatagoden til samme tabell i en HTML -fil

Vi vil bruke CSSs Colspan -egenskap for å spenne over to tabellkomponenter, som i dette tilfellet vil være tabelloverskriften og tabelldatagoden i dette eksemplet. Denne egenskapen vil bli brukt spesielt inne i TH, og TD -tagger for å spenne over en rad i en enkelt kolonne i en tabell, noe som resulterer i to spanede rader.

I dette skriptet vil vi åpne topptaggen og starte med stilkoden for å style tabellen og dens komponenter, for eksempel tabelloverskrift og tabelldata. Etter å ha gitt stilattributter, vil taggen for sidens kropp bli åpnet. I kroppskoden lager vi en tabell med fire rader ved hjelp av TR -taggen. Tabelloverskriften vil bli lagt til den første raden ved hjelp av TH -elementet. Colspan -egenskapen vil da bli brukt til å kombinere begge tabellens kolonner i denne raden. Colspan -egenskapen vil bli gitt i tabelloverskriftselementet ved å bruke Colspan -nøkkelordet som en inngang og antall kolonner på tabellen vår som en utgang. Overskriften til denne tabellen vil fungere som tabellens samlede overskrift.

Så vil vi legge til en ny rad etter den tredje raden der vi bruker Colspan -attributtet til å kombinere tabellens kolonner. Vi vil legge til totalen av tabellkomponentene fra de to foregående radene i denne raden.

Som vist i utgangen ovenfor, la vi til fire rader i tabellen, hvorav den første er en enkelt celle som består av to kolonner på grunn av Colspan -attributtet som brukes i TH -taggen, noe som gjør det til en vanlig overskrift for alle tabellkomponenter, og den siste er også en enkelt som representerer summen av tall fra de forrige radene.

Eksempel 04: Bruke CSS Colspan og Rowspan -egenskapen på samme tabell i en HTML -fil

I dette eksemplet vil vi bruke CSSs Colspan og Rowspan -egenskaper for å spenne over to tabellkolonner med to rader. Denne egenskapen vil bli brukt spesielt inne i TH -taggen for å lage en celle med to kolonner og to rader i en tabell.

I dette skriptet åpner vi overskriften og begynner å style tabellen og dens egenskaper, for eksempel tabelloverskrift og tabelldata, med stilkoden. Etter å ha gitt stilattributter, vil taggen for sidens kropp bli åpnet. I kroppskoden lager vi en tabell med tre rader ved hjelp av TR -taggen. Tabelloverskriften vil bli lagt til den første og andre raden ved hjelp av TH -taggen.

Deretter, i denne raden, vil Colspan- og Rowspan -egenskapene bli brukt til å kombinere begge tabellens kolonner. Colspan -egenskapen vil bli spesifisert i tabelloverskriftselementet ved å bruke Colspan -nøkkelordet som en inngang, og Rowspan -egenskapen vil bli spesifisert på samme måte. Deretter, i andre og tredje rad, vil vi legge data i tabellens kolonner ved hjelp av TD -taggen.

Som vist i resultatet over, la vi til tre rader og tre kolonner i tabellen, hvorav den første er en enkelt celle som består av to kolonner og to rader på grunn av Colspan- og rowspan -attributtene som er brukt i TH -taggen.

Konklusjon

I denne artikkelen har vi diskutert Colspan -egenskapen som CSS gir i en HTML -fil. Denne egenskapen legges vanligvis til tabellelementene som tabelloverskrift og tabelldata for å lage spantede celler i flere kolonner. Colspan -egenskapen kan legges til flere ganger i en tabell for å vise mer presentable data til brukeren, som vi implementerte i denne artikkelen om Notisblokkene ++ IDE. Vi implementerte også denne eiendommen med Rowspan -eiendommen som et eksempel for å utvikle en bedre forståelse av bruken av denne eiendommen.