Il tag <TBODY> in Html
In questa lezione della guida HTML ti spiego cos'è e a cosa serve il tag <tbody>
<tbody> </tbody>
Il tag tbody è utilizzato per raggruppare le righe di dati all'interno di una tabella.
Tutto ciò che viene inserito all'interno del tag di apertura <tbody> e del tag di chiusura </tbody> viene visualizzato all'interno della tabella.
A cosa serve? La sua funzione principale è quella di migliorare l'accessibilità delle tabelle per gli utenti con disabilità visive che utilizzano tecnologie assistive (es. browser vocali), perché separa i dati della tabella dalle altre informazioni presenti nella tabella (es. intestazioni, note, ecc. ).
Puoi usare il tag <tbody> all'interno del tag <table> nella sezione <body> del documento HTML.
Ti faccio un esempio pratico.
- <!DOCTYPE html>
- <html>
- <head>
- ...
- </head>
- <body>
- <table>
- <thead>
- <tr><th> Città </th> <th> Provincia </th><th> Regione </th> </tr>
- </thead>
- <tbody>
- <tr><td> Roma </td> <td> RM </td><td> Lazio </td> </tr>
- <tr><td> Milano </td> <td> MI </td><td> Lombardia </td> </tr>
- <tr><td> Torino </td> <td> TO </td><td> Piemonte </td> </tr>
- </tbody>
- <tfoot>
- <tr><td> Dati aggiornati al 2023 </td><td></td><td></td></tr>
- <tfoot>
- </table>
- </body>
- </html>
Come puoi vedere, la tabella è suddivisa in tre parti.
- Il tag thead contiene l'intestazione della tabella
- Il tag tbody contiene le righe di dati. All'interno del tag <tbody> sono disposte tutte le righe <tr> della tabella che contengono i dati.
- Il tag tfoot contiene le eventuali note alla fine della tabella
In questo modo, gli utenti che utilizzano uno screen reader hanno una migliore comprensione del contenuto della tabella, in quanto i dati sono separati dall'intestazione.
Perché migliora l'accessibilità? Quando un utente che utilizza uno screen reader, un software che legge ad alta voce il contenuto della pagina web, visualizza una tabella, il software legge ad alta voce ogni singolo elemento all'interno della tabella, inclusi i tag di intestazione (thead) e di piè di pagina (tfoot). Utilizzando il tag tbody, puoi separare i dati i dati all'interno della tabella dal resto degli elementi, migliorando la comprensione delle informazioni da parte dell'utente e riducendo il tempo di lettura della tabella.
Oltre a migliorare l'accessibilità della pagina, il tag tbody è utile per dividere in più blocchi il contenuto di una tabella molto grande.
Inoltre, migliora le prestazioni della pagina web, perché aiuta i browser a renderizzare le tabelle in modo più efficiente.
