Mikä on 'rowspan'-attribuutti ja kuinka sitä käytetään 'td'-elementin kanssa HTML:ssä?

Mika On Rowspan Attribuutti Ja Kuinka Sita Kaytetaan Td Elementin Kanssa Html Ssa



HTML:ssä ' riviväli ” on attribuutti, jota voidaan hyödyntää taulukoita tehtäessä. Sitä käytetään yleisesti useiden vierekkäisten solujen yhdistämiseen pystysuunnassa. Sitä voidaan käyttää monimutkaisten pöytäsuunnitelmien luomiseen samalla, kun se lisää visuaalista mielenkiintoa käyttäjälle. Sen avulla kehittäjä voi vähentää HTML-koodia ja parantaa taulukon luettavuutta. Lisäksi 'rowspan'-attribuutti voi auttaa järjestämään taulukon ryhmittelemällä useita soluja.

Tämä opas osoittaa, mikä on 'rowspan'-attribuutti ja kuinka sitä käytetään 'td'-elementin kanssa.

Mikä on riviväli-attribuutti?

'Riviväli'-attribuuttia käytetään useiden solujen yhdistämiseen pystysuunnassa. Siihen pääsee nimellä ' riviväli = arvo ', missä ' arvo ” on niiden rivien lukumäärä, jotka on yhdistettävä pystysuunnassa. Siitä on hyötyä käyttäjien luettavuuden parantamisessa ja monimutkaisen tiedon näyttämisessä käyttäjää houkuttelevammalla tavalla.





Mikä on 'td'-elementti?

' td ” tai taulukon tietoelementtiä käytetään solun määrittämiseen HTML-taulukossa. Sitä käytetään useimmiten yhdessä muiden taulukon HTML-elementtien, kuten '', '', '

' kanssa taulukon sisällön luomiseen. Sitä voidaan käyttää myös attribuuttien, kuten 'colspan' ja 'rowspan' kanssa lisäämään suunnitteluominaisuuksia, vähentämään monimutkaisuutta ja parantamaan luettavuutta jne. Sitä käytetään HTML-tiedostossa käyttämällä ' ' -tunnisteet, jotka lisäävät rivit taulukkoon ja käyttävät '
' -tunniste.



Kuinka käyttää 'rowspan'-attribuuttia 'td'-elementin kanssa?

Parempi esitys 'rowspan'-attribuutin ja 'td'-elementin välisestä suhteesta. Käydään läpi käytännön esimerkki noudattamalla alla olevaa vaiheittaista ohjetta:



Vaihe 1: Taulukon luominen HTML-muodossa

Luo ensin taulukko ' ' -tunniste. Lisää sen sisälle useita '

'-tunniste solujen luomiseksi:



< tyyli >

pöytä{

border-collapse:collapse;

marginaali: 40px;

}

th,td{

reuna: 2px tasainen punainen;

täyte: 20px;

}

< / tyyli >

< / pää >

< kehon >

< pöytä >

< tr >

< th > emp.id < / th >

< th > työntekijän nimi < / th >

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

< td > 80 000 < / td >

< / tr >

< / pöytä >

< / kehon >

Yllä olevassa koodinpätkässä:

  • Ensin on luotu viisi riviä ja jokaiselle solulle toimitetaan valedataa.
  • Seuraavaksi ' pöytä '-elementti on valittuna ja aseta ' romahdus 'arvo CSS:lle' rajan romahtaminen ” omaisuutta.
  • Sen jälkeen ' rajaa ' ja ' pehmuste ” ominaisuuksia hyödynnetään parantamaan käyttäjien näkyvyyttä ja luomaan käyttäjää houkutteleva vaikutus.

Koodin suorittamisen jälkeen taulukko näyttää tältä:



Yllä oleva tulos näyttää, että taulukko on luotu ja muotoiltu.

Vaihe 2: 'rowspan'-attribuutin käyttäminen 'td'-elementin kanssa

' riviväli ” attribuutti yhdistää viereiset solut pystysuunnassa. Sitä käytetään '

”elementti/tunniste. Attribuutti ottaa luvun arvona ja kertoo kuinka monta solua yhdistetään pystysuunnassa. Tulevan viereisen solun määrässä on oltava yksi solu vähemmän, ja tämä tila täytetään 'rowspan'-attribuutilla alla olevan kuvan mukaisesti:

< kehon >

< pöytä >

< tr >

< th >Emp.id< / th >

< th >Työntekijän nimi< / th >

< th > Palkka< / th >

< / tr >

< tr >

< td > 1 < / td >

< td >John< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Joseph< / td >

< td riviväli = '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 >

< / pöytä >

< / kehon >

Yllä olevassa koodissa:

  • 'Riviväli' on liitetty työntekijälle, jolla on ' Palkka ”td-elementti.
  • Arvo ' 2 ' annetaan 'rowspan'-attribuutille, joka asettaa samat tiedot molempiin vierekkäisiin soluihin, kuten alla on esitetty:

Tulos osoittaa, että kaksi solua on yhdistetty ja käyttäjän luettavuus on nyt parannettu.

Johtopäätös

' riviväli ' attribuutti toimii ' td ” -elementti yhdistää useita vierekkäisiä soluja pystysuunnassa. Attribuutti ottaa luvun arvona ja kertoo kuinka monta solua yhdistetään. Sitä käytetään, kun samat tiedot toimitetaan useille soluille. Tämä blogi on osoittanut, mitä 'rowspan' on ja kuinka sitä käytetään 'td'-elementin kanssa HTML:ssä.

Muut

Luokka

Suosittu Viestiä

Kuinka ilmoittaa ongelmasta Discordille

Mikä on HTML DOM -tyylin taustakuvaominaisuus JavaScriptissä

Puhelinnumeron muotoilu JavaScriptillä

Kuinka käyttää Set-palvelua (Microsoft.PowerShell.Management)?

Mikä on Amazon Silk?

5 parasta Discord-palvelinta Valheimille, joihin voit liittyä

Nextcloud Docker Compose

Äänen korjaaminen Raspberry Pi:ssä

Kuinka tyhjentää vaihto Linuxissa

Kuinka saada ystäviä Robloxissa

Kuinka asentaa Go Ubuntu 24.04:ään

Kuinka luoda hakemisto tai kansio Windowsissa

Kuinka ottaa käyttöön staattinen verkkosivusto AWS Amplifyn avulla?

Kuinka omaksua IAM-rooli AWS CLI:n avulla?

Kuinka luoda upotus englanninkielisten lauseiden luettelosta

Mikä on paras tapa löytää, jos kohde on JavaScript-taulukossa

Kuinka käyttää SQL Server -rooleja

Kuinka asentaa Rust Ubuntuun

Kuinka poistaa roikkuvat Docker-kuvat

SQL Server GUID