7.1 Tag <caption>
I tag <caption>, <thead>, <tbody> e <tfoot> vengono utilizzati per migliorare la strutturazione e la marcatura semantica delle tabelle in HTML. Aiutano a organizzare i dati, rendendo le tabelle più comprensibili e accessibili sia per gli utenti che per i motori di ricerca.
Tag <caption>
Il tag <caption> viene utilizzato per aggiungere un titolo alla tabella. Aiuta a descrivere il contenuto della tabella e la rende più comprensibile per gli utenti e accessibile per i motori di ricerca.
Sintassi:
<table>
<caption>Titolo della tabella</caption>
<!-- Contenuto della tabella -->
</table>
Esempio:
<table>
<caption>Titolo della tabella</caption>
<tr>
<th>Nome</th>
<th>Punteggio</th>
</tr>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</table>
7.2 Tag <thead>
Il tag <thead> viene utilizzato per raggruppare le righe dell'intestazione della tabella. Aiuta a separare logicamente l'intestazione della tabella dal suo contenuto principale.
Sintassi:
<table>
<thead>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
</thead>
<!-- Contenuto della tabella -->
</table>
Esempio:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Punteggio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Tag <tbody>
Il tag <tbody> viene utilizzato per raggruppare la parte principale del contenuto della tabella. Aiuta a separare il contenuto principale dall'intestazione e dal "piede" della tabella.
Sintassi:
<table>
<thead>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
</thead>
<tbody>
<!-- Contenuto della tabella -->
</tbody>
</table>
Esempio:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Punteggio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Tag <tfoot>
Il tag <tfoot> viene utilizzato per raggruppare le righe del "piede" della tabella. Solitamente contiene informazioni riepilogative o generali.
Sintassi:
<table>
<thead>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
</thead>
<tbody>
<!-- Contenuto della tabella -->
</tbody>
<tfoot>
<tr>
<td>Riepilogo 1</td>
<td>Riepilogo 2</td>
</tr>
</tfoot>
</table>
Esempio completo:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Punteggio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Media</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Ricordare questo è davvero facile:
Spiegazione della struttura della tabella
<table>: contenitore esterno per l'intera tabella<caption>: titolo della tabella, aiuta a descrivere il suo contenuto<thead>: raggruppa le righe dell'intestazione della tabella<tbody>: raggruppa il contenuto principale della tabella<tfoot>: raggruppa le righe del piede della tabella
Consolidiamo il materiale
Creiamo una tabella con tutti i tag studiati e stilizziamola.
<table>
<caption>Risultati dell'esame</caption>
<thead>
<tr>
<th>Nome</th>
<th>Punteggio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Media</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION