Che cos'è l'attributo 'rowspan' e come utilizzarlo con l'elemento 'td' in HTML?

Che Cos E L Attributo Rowspan E Come Utilizzarlo Con L Elemento Td In Html



In HTML, il ' rowspan ' è un attributo che può essere utilizzato durante la creazione di tabelle. È comunemente usato per unire più celle adiacenti in una direzione verticale. Può essere utilizzato per creare progetti di tavoli complessi aggiungendo interesse visivo per l'utente. Usandolo, lo sviluppatore può ridurre il codice HTML e migliorare la leggibilità della tabella. Inoltre, l'attributo 'rowspan' può aiutare a organizzare una tabella raggruppando più celle.

Questa guida mostra cos'è l'attributo 'rowspan' e come usarlo con l'elemento 'td'.

Cos'è un attributo 'rowspan'?

L'attributo 'rowspan' viene utilizzato per unire più celle in direzione verticale. È possibile accedervi come ' rowspan = valore ', dove il ' valore ” è il numero di righe che devono essere unite in direzione verticale. È utile per migliorare la leggibilità dell'utente e visualizzare dati complessi in un modo più accattivante per l'utente.





Cos'è un elemento 'td'?

IL ' td ” o elemento di dati della tabella viene utilizzato per definire una cella all'interno di una tabella HTML. Viene utilizzato principalmente in combinazione con altri elementi HTML della tabella come '', '', '

per creare il contenuto della tabella. Può anche essere utilizzato con attributi come 'colspan' e 'rowspan' per aggiungere ulteriori funzionalità di progettazione, ridurre la complessità e migliorare il fattore di leggibilità, ecc. Viene utilizzato nel file HTML utilizzando il ' ” tag che inseriscono le righe nella tabella e utilizzano il “
etichetta '.



Come utilizzare l'attributo 'rowspan' con l'elemento 'td'?

Per una migliore dimostrazione della relazione tra l'attributo “rowspan” e l'elemento “td”. Facciamo un esempio pratico seguendo la seguente guida passo-passo:



Passaggio 1: creazione della tabella in HTML

Innanzitutto, crea una tabella con l'aiuto del ' etichetta '. Al suo interno aggiungi più '

” tag per creare celle:



< stile >

tavolo{

border-collapse:collasso;

margine: 40px;

}

th,td{

bordo:2px rosso fisso;

imbottitura: 20px;

}

< / stile >

< / Testa >

< corpo >

< tavolo >

< tr >

< th > emp.id < / th >

< th > Nome dipendente < / th >

< th > Stipendio < / th >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / td >

< td > 160.000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Giuseppe < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Angela < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > Scarlatto < / td >

< td > 80.000 < / td >

< / tr >

< / tavolo >

< / corpo >

Nello snippet di codice sopra:

  • Innanzitutto, sono state create le cinque righe e vengono forniti alcuni dati fittizi a ciascuna cella.
  • Successivamente, il “ tavolo ” elemento è selezionato e impostare il “ crollo ” valore al CSS “ crollo del bordo ' proprietà.
  • Dopodiché il “ confine ' E ' imbottitura Le proprietà ” vengono utilizzate per migliorare la visibilità dell'utente e creare un effetto accattivante per l'utente.

Dopo l'esecuzione del codice, la tabella si presenta così:



L'output precedente mostra che la tabella è stata creata e con uno stile.

Passaggio 2: utilizzo dell'attributo 'rowspan' con l'elemento 'td'.

IL ' rowspan L'attributo ” unisce le celle adiacenti nella direzione verticale. Viene utilizzato con il '

” elemento/etichetta. L'attributo accetta un numero come valore e indica quante celle vengono unite in direzione verticale. La prossima cella adiacente deve avere una cella in meno in quantità e quello spazio viene riempito dall'attributo 'rowspan' come mostrato di seguito:

< corpo >

< tavolo >

< tr >

< th >Emp.id< / th >

< th >Nome dipendente< / th >

< th >Stipendio< / th >

< / tr >

< tr >

< td > 1 < / td >

< td >Giovanni< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Giuseppe< / td >

< td rowspan = '2' > 120 ,000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angela< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >Scarlatto< / td >

< td > 80 ,000< / td >

< / tr >

< / tavolo >

< / corpo >

Nel codice sopra:

  • Il 'rowspan' è allegato con il dipendente che ha un ' Stipendio ” td elemento.
  • Il valore di ' 2 ' viene fornito all'attributo 'rowspan' che imposta gli stessi dati in entrambe le celle adiacenti come mostrato di seguito:

L'output mostra che le due celle sono unite e la leggibilità per l'utente è ora migliorata.

Conclusione

IL ' rowspan L'attributo ” funziona con l'attributo “ td ” per unire più celle adiacenti in direzione verticale. L'attributo accetta un numero come valore e indica quante celle vengono unite. Viene utilizzato quando gli stessi dati vengono forniti a più celle. Questo blog ha dimostrato cos'è 'rowspan' e come usarlo con l'elemento 'td' in HTML.

Altro

Categoria

Messaggi Popolari

Come conoscere la versione di Windows 10

ESP32 può fare ZigBee?

Come aggiungere un commento nel prompt dei comandi

Come modificare video su iPhone: una guida di base

Come configurare il port forwarding con Iptables su sistemi basati su Linux

Come scoprire lo stato attuale di ChatGPT?

Quali strumenti AWS e DevOps sono necessari per sviluppare un'app Web?

Come rintracciare un iPhone usando Android?

Come creare div sovrapposti con CSS

Sequenza di Fibonacci C++

Grafico a dispersione in Tableau: una guida completa

Come usare while Loop in C++

Come creare una macchina virtuale Windows 11 su Proxmox VE 8

Come emulare la super parola chiave in C++

Come elencare i servizi in esecuzione su Linux

Come determinare l'URL da cui è stato originariamente clonato un repository Git locale?

Come creare una tabella utilizzando solo tag e CSS

Come chiamare ridurre una matrice di oggetti per sommare le loro proprietà?

Come utilizzare punti di interruzione e query multimediali con clip di sfondo in Tailwind

I 5 migliori ottimizzatori di sistema gratuiti per potenziare il tuo PC