Hva er 'rowspan'-attributtet og hvordan brukes med 'td'-elementet i HTML?

Hva Er Rowspan Attributtet Og Hvordan Brukes Med Td Elementet I Html



I HTML er ' radspenn ” er en egenskap som kan brukes når du lager tabeller. Det brukes ofte til å slå sammen flere tilstøtende celler i vertikal retning. Den kan brukes til å lage komplekse borddesign mens den legger til visuell interesse for brukeren. Ved å bruke den kan utvikleren redusere HTML-kode og forbedre tabelllesbarheten. Dessuten kan 'rowspan'-attributtet hjelpe til med å organisere en tabell ved å gruppere flere celler.

Denne veiledningen viser hva som er 'rowspan'-attributtet og hvordan du bruker det med 'td'-elementet.

Hva er et 'rowspan'-attributt?

'rowspan'-attributtet brukes til å slå sammen flere celler i vertikal retning. Den kan nås som ' radspenn = verdi ', hvor i ' verdi ” er antall rader som må slås sammen i vertikal retning. Det er gunstig for å forbedre brukerens lesbarhet og vise komplekse data på en mer brukertiltalende måte.







Hva er et 'td'-element?

« td ” eller tabelldataelement brukes til å definere en celle i en HTML-tabell. Det brukes for det meste sammen med andre tabell HTML-elementer som '', '', '

for å lage tabellinnhold. Den kan også brukes med attributter som 'colspan' og 'rowspan' for å legge til ekstra designfunksjoner, redusere kompleksitet og forbedre lesbarhetsfaktoren osv. Den brukes i HTML-filen ved å bruke ' '-tagger som setter inn radene i tabellen og bruker '
' stikkord.



Hvordan bruke 'rowspan'-attributtet med 'td'-elementet?

For en bedre demonstrasjon av forholdet mellom 'rowspan'-attributtet og 'td'-elementet. La oss gå gjennom et praktisk eksempel ved å følge trinn-for-trinn-guiden nedenfor:



Trinn 1: Oppretting av tabell i HTML

Lag først en tabell ved hjelp av ' ' stikkord. Inni den legg til flere '

' tag for å lage celler:





< stil >

bord{

border-collapse:kollaps;

margin: 40px;

}

th,td{

border:2px solid rød;

polstring: 20px;

}

< / stil >

< / hode >

< kropp >

< bord >

< tr >

< th > emp.id < / th >

< th > ansattes navn < / th >

< th > Lønn < / th >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / td >

< td > 160 000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Josef < / td >

< td > 120 000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Angela < / td >

< td > 120 000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > Scarlet < / td >

< td > 80 000 < / td >

< / tr >

< / bord >

< / kropp >

I kodebiten ovenfor:

  • Først har de fem radene blitt opprettet og noen dummy-data er gitt til hver celle.
  • Deretter ' bord '-elementet er valgt og sett ' kollapse 'verdi til CSS' grensekollaps ' eiendom.
  • Etter det, ' grense ' og ' polstring egenskaper brukes til å forbedre brukerens synlighet og skape en brukertiltalende effekt.

Etter utførelse av koden ser tabellen slik ut:



Utdataene ovenfor viser at tabellen er opprettet og stilt.

Trinn 2: Bruk 'rowspan'-attributtet med 'td'-elementet

« radspenn ”-attributtet slår sammen tilstøtende celler i vertikal retning. Den brukes med '

” element/tag. Attributtet tar et tall som en verdi og forteller hvor mange celler som blir slått sammen i vertikal retning. Den kommende tilstøtende cellen må ha én celle mindre i mengde, og den plassen fylles av 'rowspan'-attributtet som vist nedenfor:

< kropp >

< bord >

< tr >

< th >Emp.id< / th >

< th >Ansattnavn< / th >

< th >Lønn< / th >

< / tr >

< tr >

< td > 1 < / td >

< td >John< / td >

< td > 160 000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Joseph< / td >

< td radspenn = '2' > 120 000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angela< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >Scarlet< / td >

< td > 80 000< / td >

< / tr >

< / bord >

< / kropp >

I koden ovenfor:

  • 'Rekkespenn' er festet med den ansatte som har en ' Lønn 'td element.
  • Verdien av ' 2 ' er gitt til 'rowspan'-attributtet som setter de samme dataene i begge tilstøtende celler som vist nedenfor:

Utdataene illustrerer at de to cellene er slått sammen og lesbarheten for brukeren er nå forbedret.

Konklusjon

« radspenn '-attributtet fungerer med ' td ”-element for å slå sammen flere tilstøtende celler i vertikal retning. Attributtet tar et tall som en verdi og forteller hvor mange celler som blir slått sammen. Den brukes der de samme dataene leveres til flere celler. Denne bloggen har demonstrert hva 'rowspan' er og hvordan du bruker det med 'td'-elementet i HTML.