Tag HTML <tbody>
Il tag <tbody> definisce il contenuto del corpo di una tabella HTML, usato insieme a <thead> e <tfoot>. Vedi esempi.
Il tag <tbody> definisce il contenuto del corpo (un insieme di righe) di una tabella HTML, creando al suo interno un blocco semantico separato. Viene utilizzato insieme ai tag <thead> e <tfoot>, che specificano rispettivamente l'intestazione e il piè di pagina della tabella. Insieme, questi tre elementi suddividono una tabella in testa, corpo e piede, rendendo il markup più leggibile, più facile da stilizzare e accessibile alle tecnologie assistive.
Il tag <tbody> deve essere utilizzato come figlio dell'elemento <table>, dopo gli elementi <caption> e <colgroup> (se presenti) e dopo l'elemento <thead>. In HTML5, l'elemento <tfoot> può essere inserito prima o dopo l'elemento <tbody> — entrambe le opzioni sono valide, e <tfoot> viene sempre visualizzato in fondo indipendentemente dalla sua posizione nel sorgente.
Perché <tbody> è importante
Anche se non scrivi mai un tag <tbody>, il browser ne crea uno per te. Quando inserisci righe <tr> direttamente all'interno di un <table>, il parser le avvolge automaticamente in un <tbody> implicito. Questo ha conseguenze pratiche:
- Selettori CSS. A causa del
<tbody>implicito, un selettore discendente cometable > tbody > trcorrisponde alle righe anche quando non hai scritto il tag, mentretable > trnon corrisponde a nulla. Saperlo evita fastidiosi bug del tipo "il mio selettore non funziona". - Raggruppamento delle righe. Una tabella può contenere più elementi
<tbody>, consentendoti di suddividere una tabella lunga in sezioni logiche (per esempio, per anno o categoria) che puoi stilizzare e scorrere in modo indipendente. - Scripting del DOM. Ogni
<table>espone una raccoltatBodiesin JavaScript (table.tBodies[0]), dandoti accesso diretto a ogni gruppo del corpo senza dover scorrere i nodi figli. - Stampa. Quando una tabella lunga si estende su più pagine stampate, i browser ripetono
<thead>e<tfoot>su ogni pagina, mentre il contenuto di<tbody>scorre da una pagina all'altra.
Gli elementi <thead>, <tbody> e <tfoot> non influenzano il layout della tabella per impostazione predefinita. Usa le proprietà CSS per personalizzare l'aspetto della tabella.
Durante la stampa di un documento, gli elementi <thead> e <tfoot> definiranno le informazioni che possono essere uguali o molto simili su ogni pagina di una tabella multipage, mentre il contenuto del tag <tbody> varierà da pagina a pagina.
Nel caso in cui si utilizzi <tbody>, non è possibile avere elementi <tr> (righe della tabella) figli dell'elemento <table> che non siano inclusi all'interno di <tbody>. Se si utilizzano righe che non sono di intestazione né di piè di pagina, devono trovarsi all'interno dell'elemento <tbody>.
È possibile utilizzare più di un elemento <tbody> per ogni tabella, purché siano tutti consecutivi. Ciò consentirà di separare le righe in sezioni nelle tabelle di grandi dimensioni e di formattarle singolarmente.
Sintassi
Il tag <tbody> va in coppia. Il contenuto è scritto tra i tag di apertura (<tbody>) e di chiusura (</tbody>).
Tag HTML <tbody>
<table>
<thead> ... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>Esempio del tag HTML <tbody>:
Tag HTML <tbody>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%; margin:30px auto; border-collapse:collapse;">
<thead style="background-color:#1c87c9; color:#fff;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot style="background-color:grey;">
<!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
<tbody style="background-color:lightgrey;">
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
</table>
</body>
</html>Risultato
Esempio del tag HTML <tbody> con i tag <thead> e <tfoot>:
Tag HTML <tbody>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 60%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #8ebf42;
color: #fff;
}
tbody {
background-color: #f3ebeb;
}
tfoot {
background-color: #ccc7c7;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2500</td>
</tr>
</tfoot>
</table>
</body>
</html>Esempio di più elementi <tbody>
È possibile utilizzare più elementi <tbody> in una stessa tabella per raggruppare le righe in sezioni separate. In questo esempio ogni trimestre ha il proprio gruppo di corpo, e ogni gruppo riceve il proprio colore di sfondo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 60%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
text-align: left;
}
thead {
background-color: #1c87c9;
color: #fff;
}
tbody:nth-of-type(odd) {
background-color: #f3ebeb;
}
tbody:nth-of-type(even) {
background-color: #e3f0fb;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tbody>
<tr>
<td>March</td>
<td>750</td>
</tr>
<tr>
<td>April</td>
<td>1200</td>
</tr>
</tbody>
</table>
</body>
</html>Accessibilità
Gli elementi <tbody>, <thead> e <tfoot> aiutano i lettori di schermo a comunicare la struttura di una tabella. Per una tabella il più possibile accessibile, abbinali a celle di intestazione che utilizzano l'attributo scope, in modo che le tecnologie assistive possano annunciare a quale intestazione appartiene una cella di dati:
<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>500</td>
</tr>
</tbody>
</table>Usa scope="col" per le intestazioni di colonna (tipicamente all'interno di <thead>) e scope="row" per le intestazioni di riga all'interno del corpo.
Attributi
| Attributo | Valori | Descrizione |
|---|---|---|
| align | right left center justify char | Specifica l'allineamento del contenuto all'interno dell'elemento <tbody>. Non supportato in HTML5 |
| bgcolor | bgcolor | Imposta il colore di sfondo delle righe all'interno dell'elemento <tbody>. Non supportato in HTML5. |
| char | character | Specifica l'allineamento del contenuto all'interno dell'elemento <tbody> rispetto a un carattere. Viene utilizzato solo quando l'attributo align="char". Non supportato in HTML5. |
| charoff | number | Specifica il numero di caratteri di cui il contenuto all'interno dell'elemento <tbody> verrà allineato rispetto al carattere specificato dall'attributo char. Viene utilizzato solo quando l'attributo align="char". Non supportato in HTML5. |
| valign | top bottom middle baseline | Specifica l'allineamento verticale del contenuto all'interno dell'elemento <tbody>. Non supportato in HTML5. |
Il tag <tbody> supporta anche gli Attributi Globali e gli Attributi di Evento.
Sostituti CSS per gli attributi deprecati
Gli attributi presentazionali sopra elencati sono obsoleti in HTML5. Usa invece il CSS:
| Attributo precedente | CSS equivalente |
|---|---|
align="center" | text-align: center; |
valign="top" | vertical-align: top; |
bgcolor="#eee" | background-color: #eee; |
Come stilizzare un tag HTML <tbody>
Punta direttamente all'elemento <tbody> nel tuo foglio di stile per assegnare al corpo della tabella il proprio sfondo, bordi e allineamento delle celle:
tbody {
background-color: #f3ebeb;
border: 2px solid #1c87c9;
}
tbody td {
text-align: center;
vertical-align: top;
}
/* Zebra-stripe the body rows */
tbody tr:nth-of-type(even) {
background-color: #e3f0fb;
}Consulta stilizzare le tabelle con CSS per ulteriori tecniche.