Hvad er 'rowspan'-attributtet, og hvordan bruges det med 'td'-elementet i HTML?

Hvad Er Rowspan Attributtet Og Hvordan Bruges Det Med Td Elementet I Html



I HTML er ' rækkevidde ” er en egenskab, der kan bruges, mens du laver tabeller. Det bruges almindeligvis til at flette flere tilstødende celler i lodret retning. Det kan bruges til at skabe komplekse borddesigns og samtidig tilføje visuel interesse for brugeren. Ved at bruge det kan udvikleren reducere HTML-kode og forbedre tabellæsbarheden. Desuden kan 'rowspan'-attributten hjælpe med at organisere en tabel ved at gruppere flere celler.

Denne vejledning viser, hvad 'rowspan'-attributten er, og hvordan man bruger den med 'td'-elementet.

Hvad er en 'rowspan'-attribut?

Attributten 'rowspan' bruges til at flette flere celler i lodret retning. Den kan tilgås som ' rækkevidde = værdi ', hvor er ' værdi ” er antallet af rækker, der skal flettes i lodret retning. Det er en fordel for at forbedre brugerens læsbarhed og vise komplekse data på en mere brugertiltalende måde.





Hvad er et 'td' element?

Det ' td ” eller tabeldataelement bruges til at definere en celle i en HTML-tabel. Det bruges mest sammen med andre tabel HTML-elementer som '', '', '

til at skabe tabelindhold. Det kan også bruges med attributter som 'colspan' og 'rowspan' for at tilføje ekstra designfunktioner, reducere kompleksitet og forbedre læsbarhedsfaktoren osv. Det bruges i HTML-filen ved hjælp af ' ' tags, der indsætter rækkerne i tabellen og bruger '
” tag.



Hvordan bruger man 'rowspan'-attributten med 'td'-elementet?

For en bedre demonstration af forholdet mellem 'rowspan'-attributten og 'td'-elementet. Lad os gennemgå et praktisk eksempel ved at følge nedenstående trin-for-trin guide:



Trin 1: Oprettelse af tabel i HTML

Først skal du oprette en tabel ved hjælp af ' ” tag. Indeni det tilføje flere '

' tag for at oprette celler:



< stil >

bord{

border-collapse:kollaps;

margen: 40px;

}

th,td{

border:2px fast rød;

polstring: 20px;

}

< / stil >

< / hoved >

< legeme >

< bord >

< tr >

< th > emp.id < / th >

< th > Ansattes navn < / th >

< th > Løn < / th >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / td >

< td > 160.000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Joseph < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Angela < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > rød < / td >

< td > 80.000 < / td >

< / tr >

< / bord >

< / legeme >

I ovenstående kodestykke:

  • Først er de fem rækker blevet oprettet, og nogle dummy-data leveres til hver celle.
  • Dernæst ' bord '-elementet er valgt og indstillet ' bryder sammen ' værdi til CSS ' grænse-kollaps ” ejendom.
  • Derefter vil ' grænse ' og ' polstring ” egenskaber bruges til at øge brugerens synlighed og skabe en brugertiltalende effekt.

Efter udførelse af koden ser tabellen sådan ud:



Ovenstående output viser, at tabellen er oprettet og stylet.

Trin 2: Brug af 'rowspan'-attributtet med 'td'-elementet

Det ' rækkevidde ” attribut flettes tilstødende celler i lodret retning. Det bruges sammen med '

” element/tag. Attributten tager et tal som en værdi og fortæller, hvor mange celler der bliver flettet i lodret retning. Den kommende tilstødende celle skal have en celle mindre i antal, og det rum bliver udfyldt af 'rowspan'-attributten som vist nedenfor:

< legeme >

< bord >

< tr >

< th >Emp.id< / th >

< th >Medarbejdernavn< / th >

< th >Løn< / th >

< / tr >

< tr >

< td > 1 < / td >

< td >John< / td >

< td > 160 .000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Josef< / td >

< td rækkevidde = '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 >

< / legeme >

I ovenstående kode:

  • 'Rækkespændet' er knyttet til, at medarbejderen har en ' Løn ”td element.
  • Værdien af ​​' 2 ” leveres til attributten “rowspan”, der angiver de samme data i begge tilstødende celler som vist nedenfor:

Outputtet illustrerer, at de to celler er slået sammen, og læsbarheden for brugeren er nu forbedret.

Konklusion

Det ' rækkevidde '-attributten fungerer sammen med ' td ” element for at flette flere tilstødende celler i lodret retning. Attributten tager et tal som en værdi og fortæller, hvor mange celler der bliver flettet. Det bruges, hvor de samme data leveres til flere celler. Denne blog har demonstreret, hvad 'rowspan' er, og hvordan man bruger det med 'td'-elementet i HTML.

Andet

Kategori

Populære Indlæg

Hvordan indstiller man værdien af ​​et skjult inputfelt gennem JavaScript?

Hvor gemmer Linux Min Syslog

Sådan markeres/fjernes afkrydsningsfeltet ved hjælp af JavaScript

Sådan installeres QEMU Guest Agent på Proxmox VE Linux Virtual Machines

5 rettelser til Werfault.exe-fejl i Windows

Sådan bruges Landscape Page i LaTeX

Hvad er Array Type i TypeScript, og hvordan kan det bruges?

Hvad vil det sige at gaffel på GitHub?

5 SQL-databaser til Raspberry Pi

Indlæs Pickle File Python

Hvad er Star-Delta Transformation

Hvorfor kan jeg ikke lide en tekstbesked på Android

Sådan oplades en kondensator

Java ArrayDeque – removeIf()

Hvordan konfigurerer jeg Amazon SES til at sende e-mails?

Sådan overfører du CSS-egenskaber 'display' + 'opacitet'.

Hvad er 'hasClass'-funktionen med almindelig JavaScript

Sådan installeres Windows 10 (Virtual Machine) i VirtualBox?

Sådan opdeles skærm i Windows 11

Sådan finder du alle filer med et filnavn, der begynder med en specificeret streng - Bash