Høyde er måling av noe fra bunnen til toppen, eller fra hodet til foten. Høyden på tabellraden er definert som avstanden mellom toppen og basen på raden. I CSS har vi "linjehøyde" -egenskapen som lar oss tilpasse høyden på tabellraden. CSS “linjehøyde” -attributt kan brukes til å endre bordets radhøyde. Når vi endrer verdien av denne "linjehøyde" -egenskapen, blir tabellraden endret til den høyden. Vi bruker denne "linjehøyde" -egenskapen for å angi høyden på tabellraden i denne opplæringen, og vi viser deg hvordan den setter høyden på tabellraden og hvordan du justerer tabellen ROW-høyden ved å bruke flere eksempler.
Eksempel nr. 1:
For å angi tabellens radhøyde, må vi designe tabellen i HTML -filen. Denne HTML -filen er opprettet her i Visual Studio Code. Men du kan bruke hvilken som helst programvare for å lage disse kodene. Denne programvaren brukes til å kjøre eksemplene. Vi må velge språket når vi oppretter en ny fil i Visual Studio Code. Ellers vil den gjenkjenne det som standard. Når HTML er valgt som språket, opprettes filutvidelsen automatisk når filen lagres under et hvilket som helst navn. Vi legger bare “!”Inn i denne filen etter å ha valgt HTML som språk og presset“ Enter ”. "HTML" -kodens kjernemerker produseres automatisk.
"Tabellen" i "kroppen" må nå opprettes. Tabellen er opprettet ved først å lage overskriften og deretter bruke "
" stikkord. Tabellen vi oppretter har fem kolonner og seks rader. Tabellens første rad er tabellens overskrifter, og vi bruker "TH" for å legge til data i den. "TD" -merket brukes også til å legge data i tabellens celler med "TR" for tabellens rader. Etter det går vi videre til CSS -filen, som vil bli brukt til å stille inn tabellens radhøyde.
Stil overskriften ved å navngi “H1” og bruke CSS -egenskaper. Vi valgte "grønt" for "farge" -parameteren som brukes til å endre fargen på teksten. Denne overskriften "font-family" er "algerisk", bruk en "grense" på "2px" på hele bordet, med typen som er satt til "solid" og grensefargen satt til "lilla". Bordets "bredde" er deretter spesifisert med at "auto" er bredden. Deretter bruker vi egenskapen "grensekollaps" og setter dette til "kollaps" for å kollapse grensen til hele bordet.
Etter dette må vi lage "grensen" for alle celler. Vi setter den samme grensen for cellen som vi bruker til bordet her. Teksten i cellene vil gjengi i "grønt" når vi setter denne "fargen" i CSS -egenskapen. Nå setter vi radhøyde på tabellen. Så her legger vi "TR" som brukes til radene og setter høyden på raden ved å bruke CSS “Line-Height” -egenskaper. Vi setter "30px" for høyden på tabellens rad. Denne høyden vil gjelde for alle rader på bordet.
Utgangen viser tabellen. I denne tabellen er høyden på radene på tabellen 30px hver. Vi kan sette høyden på raden etter vårt valg. Vi setter den til 30px i denne koden, og du kan sjekke dette i den gitte utgangen.
Eksempel 2:
Bordet vi bruker her er det samme som den vi brukte i forrige eksempel. Men vi kommer til å endre eiendomsverdien for linjehøyde for å justere bordets radhøyde. Vi kommer til å endre skrifttonens "font-family" til "Times New Roman". Deretter bruker vi noen attributter til hele bordet og etablerer grensen. Først med en "grense" av "2px" og i "solid" form, så vel som i fargen "grønn". Vi bruker "Auto" nøkkelordet for "bredde" -egenskapen og "kollaps" nøkkelordet for "grensekollaps" -egenskapen ".
Vi må også etablere grensen for cellene. Så vi bruker "grensen" -egenskapen nå for "th" og "tr". Verdiene er satt til “2px solid grønn” og cellens tekst er farge “blå”. Deretter, for alle rader bortsett fra overskriften, setter vi "20px" -høyden ved å bruke egenskapen "linjehøyde". Men vi ønsker også å sette høyden på overskriften. For dette bruker vi "TH" og bruker "linjehøyde" her og setter den til "80px". Når denne tabellen vil gjengi på utgangsskjermen, vil den overskriften radhøyden være "80px" og høyden på de gjenværende radene vil være "20px".
Her kan du se at høyden på den første raden er større enn de gjenværende radene, da vi har satt høyden til "80px" og den andre radens høyde er "20px". Derfor er det en forskjell mellom høyden på den første raden som er overskriftsraden og høyden på de andre radene.
Eksempel nr. 3:
I denne tabellen gir vi navnet til hver rad som "T1", "T2", "T3", og så videre. Deretter setter vi forskjellige høyder for hver rad i CSS. Vi vil bruke egenskapen "linjehøyde" separat på hver rad ved å bruke navnene på radene som vi har gitt her i denne HTML-filen.
Først styler vi overskriften som vises på toppen for å gjøre det attraktivt ved å bruke noen egenskaper. Vi bruker "fargen" som er CSS -egenskapen og setter "Light Coral" -fargen for denne overskriften. Overskriften "font-family" er "algerisk". Bordgrensen er satt som "maroon". Vi setter den til "solid" slik at det vises som en solid linjegrense, og den er "2px" i bredden. Deretter "kollapse" grensen slik at den vises som en enkelt grense.
Nå skaper vi en "grense" rundt alle celler i tabellen. Vi bruker den samme grensen som bordgrensen. Den samme "maroon" fargen og den solide typen "2px". Teksten "farge" er "svart". Nå skal vi sette høyden på hver rad separat ved å bruke navnet på radene. Vi bruker "T1" med "TR" som representerer den første raden på tabellen og setter høyden ved å bruke "linjehøyde" -egenskapen og sette "20px" som verdi. Bruk deretter “T2” med “Tr” ved å plassere ”.”Mellom dem som er den andre raden. Høyden på denne raden er satt til “30px”.
Etter dette har vi “T3” som er den tredje raden. Vi skriver det med “TD” når vi skriver “T1” eller “T2”, men her er høyden “50px”. Vi setter "70px" for den fjerde raden ved å bruke “T4” og “90px” for den femte raden. Sett også "120px" for de sjette radene og navnet på den sjette raden er "T6". Nå setter vi forskjellige radhøyder for alle seks radene.
Høydeforskjellen mellom alle radene sees i denne gitte utgangen. Her er høyden på den første raden mindre enn den andre raden og så videre. Alle radene er av forskjellige høyder, så på denne måten kan vi sette høyden på radene i CSS.
Konklusjon:
Denne opplæringen demonstrerte hva bordets radhøyde er, hvordan du setter bordets radhøyde i CSS, og hvilken CSS -egenskap som brukes til å bestemme tabellens radhøyde. Som vi har sagt, måles høyden på en bords rad fra toppen til bunnen av raden og forklarte at "linjehøyde" -egenskapen til CSS brukes til å sette høyden på radene. Vi har brukt denne egenskapen på alle rader kombinert, og på hver bords rad hver for seg. Vi har gått over forskjellige koder i denne opplæringen, så vel som resultatene av disse kodene. Etter å ha lest denne opplæringen grundig, vil du sette høyden på tabellens rad i prosjekter.
