Tag tfoot
Il tag tfoot definisce la parte inferiore della tabella.
Viene utilizzato per raggruppare le righe in modo
da poter applicare immediatamente stili CSS a
un determinato gruppo. In una tabella
può esserci solo un tag tfoot.
Il tag tfoot è spesso utilizzato insieme
a thead
e tbody
per definire la parte superiore, la parte principale
e la parte inferiore di una tabella HTML. Per impostazione predefinita,
il browser posizionerà il contenuto di tfoot
nella parte inferiore della tabella, e thead -
in quella superiore.
Esempio
Assegniamo al gruppo di righe, raggruppate dal tag
tfoot, il colore rosso per il testo
tramite la proprietà color:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Stipendio</th>
</tr>
</thead>
<tbody>
<tr>
<td>nome1</td>
<td>cognome1</td>
<td>200$</td>
</tr>
<tr>
<td>nome2</td>
<td>cognome2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>conteggio: 2</td>
<td>-</td>
<td>totale: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Esempio
Qui, invece, osserviamo come thead
non sia in alto, e tfoot non sia in basso,
tuttavia il browser li posiziona comunque nei loro
posti corretti:
<table>
<tfoot>
<tr>
<td>conteggio: 2</td>
<td>-</td>
<td>totale: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>nome1</td>
<td>cognome1</td>
<td>200$</td>
</tr>
<tr>
<td>nome2</td>
<td>cognome2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Stipendio</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
