I vårt daglige liv sier vi at høyden er måling av noe fra bunn til topp, eller fra hode til fot. Vi har "høyde" -egenskapen i CSS som gir oss denne muligheten til å sette høyden på tabellen i henhold til vårt valg. Vi kan sette den i piksler eller prosenter. Når vi setter en verdi i denne "høyde" -egenskapen, justeres tabellen vår i den gitte høyden. I denne guiden vil vi bruke denne egenskapen til å sette høyden på bordet og gi deg beskjed om hvordan den vil stille inn tabellens høyde. Vi vil sette høyden på tabellen her i forskjellige eksempler.
Eksempel 1
Vi må først designe tabellen i HTML -filen for å angi høyden på tabellen. Visual Studio Code brukes til å produsere denne HTML -filen. Du kan bruke hvilken som helst programvare til å gjøre disse kodene. Vi bruker denne programvaren for å utføre eksempler i denne guiden. Når vi oppretter en ny fil i Visual Studio Code, må vi velge språket, eller den vil gjenkjenne den som standard. Når vi velger HTML som språket, genereres filutvidelsen automatisk når vi lagrer filen under et hvilket som helst navn.
Etter å ha valgt HTML som språk, skriver vi ganske enkelt “!”Inn i denne filen og treff“ Enter ”. "HTML" -kodens grunnleggende tagger dannes automatisk. Bare plasser kroppsdelen i HTML -kroppen. CSS -fillenken er plassert før kroppen i "hodet" -merket. Vi oppretter bordet ved først å generere overskriften og deretter bruke "
" stikkord. Det er fem kolonner og seks rader i tabellen vi lager. Den første raden er tabellens overskrift og vi bruker “TH” for å legge til data i tabellens overskriftsrekke.
Vi bruker også “TD” -koden for å sette inn data i tabellens celler med “TR” som representerer tabellens rader. Deretter går vi videre til CSS -filen som vil bli brukt til å angi høyden på denne tabellen.
Stil overskriften ved å nevne “H1” og bruke egenskaper til CSS her. Vi setter "fargen" til "rød". "Font-Family" for denne overskriften er "Times New Roman". Style deretter hele bordet ved å bruke en "grense" på "2px" og sette sin type til "solid". Fargen på grensen er "grå".
Deretter har vi "bredden" på bordet. Vi bruker "250px" for bredde. Her skal vi sette "høyden" på tabellen. For å sette høyden på tabellen bruker vi "høyde" -egenskapen til CSS. Når vi setter verdien her i denne "høyde" -egenskapen, vil den stille inn tabellens høyde. Vi setter "høyden" på denne tabellen til "150px". Så når denne tabellen gjengir på skjermen, vil den ha en "150px" høyde.
Etter dette setter vi grensen til en enkelt kant for alle celler og tabellegrenser ved å bruke egenskapen "grensekollaps" og sette denne egenskapen til "kollaps". Vi bruker også grensen på cellene og overskriften. Vi bruker "grensen" -egenskapen med "TH" og "TD" også og setter den samme grensen som vi satte for bordet. Grensen er i "grå" av "solid" type og "2px" i bredden.
Tabellen som er gitt nedenfor er i "150px" -høyde. Den administrerer innholdet i denne høyden som vi har nevnt i CSS -koden. Når vi setter høyden på bordet, vil det bli opprettet i samme høyde.
Eksempel nr. 2
Bordet vi bruker her er det samme som vi har laget i forrige eksempel. Men her skal vi endre høyden på tabellen ved å bruke høydeegenskapen. Vi setter "blå" for "overskriften" som vises før bordet øverst på siden. Sett deretter sin "font-familie" til "calibri" og vekten er "dristigere". Deretter bruker vi noen egenskaper på hele tabellen. Still ut grensen ved å bruke "grense" av "2px" og i "solid" form og i "oransje" farge. Bredden på denne tabellen er “300px”. Denne gangen og vi øker høyden på bordet her til “250px”. "Border-Collapse" er igjen "kollaps" i dette eksemplet. Innstillingen av "TH" og "TD", ved å bruke den samme grensen som tabellen og "fargen" "rød", setter fargen på teksten skrevet i cellene og headingceller til "rød". "Font-Family" for denne teksten er "Arial".
I denne utgangen økes tabellhøyden fra forrige tabell som vi har opprettet i eksempel 1 fordi vi endrer høyden her i CSS -koden. Deretter økte vi høyden på bordet.
Eksempel nr. 3
Vi bruker samme tabell igjen som den vi brukte i det første eksemplet. Men vi kommer til å endre høydenes eiendomsverdi for å justere bordets høyde. "Overskriften" som vises før bordet øverst er satt til "lilla". Endre deretter skrifttonens "font-family" til "Algerie". Deretter bruker vi noen attributter på hele bordet og etablerer grensen. For det første med en "grense" av "2px" og i "solid" form, så vel som i fargen "grønn". Denne gangen er bordets bredde “Auto” mens bordets høyde er “100px.”
I dette tilfellet er "grensekollaps" satt med "kollaps". "TH" og "TD" er satt til samme grense som bordet. Fargen på teksten som er skrevet i cellene og headingcellene er satt til “lilla”. Denne tekstens "font-family" er "Cambria".
Det gitte skjermbildet er utdataene fra denne koden. Her kan du se at tabellen justerer bredden automatisk og høyden på denne gitte tabellen er "100px".
Eksempel 4
Vi setter den samme tabellen ved å bruke forskjellige verdier av egenskapene. "Fargen" på overskriften er "oransje" og dens "font-familiens" er "algerisk". I dette tilfellet er grensefargen på hele bordet "lilla". "Bredden" på hele tabellen er igjen "Auto", men "høyden" på tabellen er "400px". Grensen til alle celler er "lilla" og teksten "farge" er "rød". "Font-family" av teksten er "sans-serif".
Her, i skjermbildet, kan du merke høyden på tabellen. Tabellen ligner på illustrasjonen ovenfor. Men i illustrasjonen nedenfor endres høyden på tabellen.
Eksempel 5
I denne koden setter vi overskriften til den "grønne" fargen på "algerisk" "font-family". Deretter er tabellegenskapene de samme som vi har diskutert i forrige eksempel. Her setter vi høyden på tabellen ved hjelp av prosent i stedet for piksel. Vi kommer til å justere høyden på tabellen til “50%”. Nå vil vi sjekke ut utgangen hvordan tabellen ser ut når vi setter høyden i prosent.
Her er høyden på tabellen “50%” og bredden er auto. Vi kan sette hvilken som helst verdi i denne "høyden" -egenskapen til tabellen. Vi kan angi høyden på tabellen som tilsvarer vårt valg.
Konklusjon:
Denne guiden var ment å vise deg hva som er høyden på tabellen, hvordan du setter høyden på tabellen i CSS, og hvilken CSS -egenskap som brukes til å stille inn bordets høyde. Som vi har diskutert, er høyden målingen av tabellen fra topp til bunn. Vi har gått over flere koder her, og vi har også inkludert utdataene. Etter å ha studert denne guiden grundig, vil du kunne sette høyden på tabellen i CSS i fremtiden.
