Ano ang 'rowspan' Attribute at Paano Gamitin ang 'td' Element sa HTML?

Ano Ang Rowspan Attribute At Paano Gamitin Ang Td Element Sa Html



Sa HTML, ang ' rowspan ” ay isang katangian na maaaring magamit habang gumagawa ng mga talahanayan. Ito ay karaniwang ginagamit upang pagsamahin ang maraming katabing mga cell sa isang patayong direksyon. Maaari itong magamit upang lumikha ng mga kumplikadong disenyo ng talahanayan habang nagdaragdag ng visual na interes para sa gumagamit. Sa pamamagitan ng paggamit nito, maaaring bawasan ng developer ang HTML code at pagbutihin ang pagiging madaling mabasa ng talahanayan. Bukod dito, ang attribute na 'rowspan' ay makakatulong sa pag-aayos ng isang table sa pamamagitan ng pagpapangkat ng maraming cell.

Ipinapakita ng gabay na ito kung ano ang attribute na 'rowspan' at kung paano ito gamitin sa elementong 'td'.

Ano ang isang 'rowspan' na Katangian?

Ginagamit ang attribute na 'rowspan' para pagsamahin ang maraming cell sa patayong direksyon. Maaari itong ma-access bilang ' rowspan = halaga ', kung saan ang ' halaga ” ay ang bilang ng mga row na kailangang pagsamahin sa patayong direksyon. Ito ay kapaki-pakinabang para sa pagpapahusay ng pagiging madaling mabasa ng user at pagpapakita ng kumplikadong data sa mas nakakaakit na paraan ng user.





Ano ang isang 'td' Element?

Ang ' td ” o elemento ng data ng talahanayan ay ginagamit upang tukuyin ang isang cell sa loob ng isang HTML na talahanayan. Ito ay kadalasang ginagamit kasama ng iba pang mga elemento ng HTML ng talahanayan tulad ng '', '', '

upang lumikha ng nilalaman ng talahanayan. Maaari rin itong gamitin sa mga katangian tulad ng 'colspan' at 'rowspan' upang magdagdag ng mga karagdagang tampok sa pagdidisenyo, bawasan ang pagiging kumplikado at pahusayin ang pagiging madaling mabasa, atbp. Ginagamit ito sa HTML file gamit ang ' ' mga tag na naglalagay ng mga hilera sa talahanayan at ginagamit ang '
” tag.



Paano Gamitin ang 'rowspan' Attribute Gamit ang 'td' Element?

Para sa isang mas mahusay na pagpapakita ng kaugnayan sa pagitan ng 'rowspan' na katangian at ng 'td' na elemento. Maglakad tayo sa isang praktikal na halimbawa sa pamamagitan ng pagsunod sa sumusunod na hakbang-hakbang na gabay:



Hakbang 1: Paglikha ng Talahanayan sa HTML

Una, lumikha ng isang talahanayan sa tulong ng ' ” tag. Sa loob nito magdagdag ng maramihang '

” tag upang lumikha ng mga cell:



< istilo >

talahanayan{

border-collapse:collapse;

margin: 40px;

}

ika,td{

hangganan:2px solid na pula;

padding: 20px;

}

< / istilo >

< / ulo >

< katawan >

< mesa >

< tr >

< ika > emp.id < / ika >

< ika > Pangalan ng Empleyado < / ika >

< ika > suweldo < / ika >

< / 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 > Scarlet < / td >

< td > 80,000 < / td >

< / tr >

< / mesa >

< / katawan >

Sa snippet ng code sa itaas:

  • Una, ang limang row ay nalikha at ang ilang dummy data ay ibinigay sa bawat cell.
  • Susunod, ang ' mesa Ang 'elemento ay pinili at itakda ang ' pagbagsak 'halaga sa CSS ' border-collapse ” ari-arian.
  • Pagkatapos nito, ang ' hangganan 'at' padding Ang mga katangian ng ” ay ginagamit upang mapahusay ang visibility ng user at lumikha ng epekto na nakakaakit ng user.

Pagkatapos ng pagpapatupad ng code, ang talahanayan ay lilitaw tulad nito:



Ang output sa itaas ay nagpapakita na ang talahanayan ay nilikha at naka-istilo.

Hakbang 2: Gamit ang 'rowspan' Attribute na may 'td' Element

Ang ' rowspan ” pinagsasama-sama ng katangian ang mga katabing cell sa patayong direksyon. Ito ay ginagamit sa '

” elemento/tag. Ang katangian ay kumukuha ng isang numero bilang isang halaga at nagsasabi kung gaano karaming mga cell ang pinagsama sa isang patayong direksyon. Ang paparating na katabing cell ay dapat magkaroon ng isang cell na mas kaunti sa dami, at ang puwang na iyon ay mapupunan ng attribute na 'rowspan' tulad ng ipinapakita sa ibaba:

< katawan >

< mesa >

< tr >

< ika >Emp.id< / ika >

< ika >Pangalan ng Empleyado< / ika >

< ika >Sahod< / ika >

< / tr >

< tr >

< td > 1 < / td >

< td >John< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Joseph< / td >

< td rowspan = '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 >

< / mesa >

< / katawan >

Sa code sa itaas:

  • Ang 'rowspan' ay nakalakip sa empleyado na mayroong ' suweldo ” elemento ng td.
  • Ang halaga ng ' 2 ' ay ibinibigay sa attribute na 'rowspan' na nagtatakda ng parehong data sa parehong katabing mga cell tulad ng ipinapakita sa ibaba:

Ang output ay naglalarawan na ang dalawang mga cell ay pinagsama at ang pagiging madaling mabasa para sa gumagamit ay pinahusay na ngayon.

Konklusyon

Ang ' rowspan gumagana ang katangiang ' sa ' td ” elemento upang pagsamahin ang maramihang katabing mga cell sa patayong direksyon. Ang katangian ay kumukuha ng numero bilang isang halaga at nagsasabi kung gaano karaming mga cell ang pinagsasama. Ito ay ginagamit kung saan ang parehong data ay ibinibigay sa maraming mga cell. Ipinakita ng blog na ito kung ano ang 'rowspan' at kung paano ito gamitin sa elementong 'td' sa HTML.

Iba pa

Kategorya

Patok Na Mga Post

Paano ko Patakbuhin ang 'apt-get install' sa Docker

Katumbas ng SQL String

Paano Mag-install ng GNOME Desktop Environment sa Raspberry Pi

Paano Mag-download at Mag-install ng CrystalDiskInfo sa Windows

Git Clone Error na 'Natanggal ang Suporta para sa Pagpapatunay ng Password'.

SQL Server LEAD() Function

Paano Bawasan ang Laki ng Larawan ng Docker

Paano Gamitin ang strncpy() Function sa C++

C++ Std::Opsyonal

Paano Mag-install ng VMware Workstation 17 Player sa Linux Mint 21

Kabanata 6: Mga Pangunahing Kaalaman sa Modernong Arkitektura ng Computer na may Assembly Language

Paano Magdagdag ng ServerStats Bot sa Discord

Paano magdagdag ng Icon sa Right-Click Menu sa Windows 7 at mas mataas - Winhelponline

Ano ang HTML Outline Radius?

Microsoft Windows Search Indexer High CPU Usage Windows 10

Ano ang Kahulugan ng Error Code 279 sa Roblox?

I-uninstall ang Python sa Ubuntu 22.04

Paano Mag-install ng Splunk sa Linux Mint 21

Ano ang atoi() sa C++

Tutorial sa Paghati ng PostgreSQL