<TFOOT>
Il tag <tfoot> definisce un insieme di sotto testo
Il tag TFOOT permette di inserire uno o più contenuti di sotto testo o piè di pagina di una tabella, questo elemento, per impostazione predefinita non influenzerà il layout della tabella e deve contenere al suo interno uno o più tag <tr> seguiti da uno o più elementi <th> , <td>, può essere inserito una volta sola per tabella e dopo i tag <caption> (se presente) e/o <thead> (se presente) e prima degli elementi <tbody> (se presente) e <tr>.
HTML
Categoria: Nessuna
Contenuti consentiti: Zero o più elementi <tr> , Script-supporting elements
Elementi padre consentiti: <table> , <template> , Note: (Vedi struttura tabella)
Esempio: Tag TFOOT
Esempio: <TFOOT>
<html>
<head>
<title>Titolo Documento</title>
<style type="text/css">
table, td, th {
border: 1px solid black;
}
thead {
background-color: yellow;
}
tfoot {
background-color: orange;
}
tbody {
background-color: aqua;
}
#Example thead tr {
display:block;
}
#Example tfoot tr {
display:block;
}
#Example tbody {
display:block;
height: 50px;
overflow: auto;
}
#Example tbody tr td {
padding: 3px 0px;
width:60px;
}
</style>
</head>
<body>
<p>Esempio utilizzo di "thead", "tfoot" e "tbody"</p>
<table>
<thead>
<tr>
<th>Testa</th>
<th>thead</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Piede</td>
<td>tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>..1</td>
<td>..2</td>
</tr>
<tr>
<td>..3</td>
<td>..4</td>
</tr>
</tbody>
</table>
<p>Esempio Scorrevole (NOTE: Non corretto in Internet Explorer 9 e versioni precedenti)</p>
<table id="Example">
<thead>
<tr>
<th style="width:200px;">Testa thead</th>
</tr>
</thead>
<tfoot>
<tr>
<td style="width:200px;">Piede tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>..1</td>
<td>..2</td>
<td>..3</td>
</tr>
<tr>
<td>..4</td>
<td>..5</td>
<td>..6</td>
</tr>
<tr>
<td>..7</td>
<td>..8</td>
<td>..9</td>
</tr>
<tr>
<td>..10</td>
<td>..11</td>
<td>..12</td>
</tr>
</tbody>
</table>
</body>
</html>
Note:
Questo elemento, abbinato o alternato agli elementi
<thead> ,
<tbody>
possono essere utilizzati per consentire lo scorrimento del corpo della tabella,
indipendentemente dall'intestazione e dal piè di pagina. Inoltre, quando si stampa un grande tabella che si estende su più pagine,
questi elementi permettono di stampare l'intestazione della tabella e il piè di pagina
nella parte superiore e inferiore di ogni pagina.
Risultato: <tfoot>
Esempio utilizzo di "thead", "tfoot" e "tbody"
Testa | thead |
---|---|
Piede | tfoot |
..1 | ..2 |
..3 | ..4 |
Esempio Scorrevole (NOTE: Non corretto in Internet Explorer 9 e versioni precedenti)
Testa thead | ||
---|---|---|
Piede tfoot | ||
..1 | ..2 | ..3 |
..4 | ..5 | ..6 |
..7 | ..8 | ..9 |
..10 | ..11 | ..12 |
Proprietà standard di visualizzazione
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
Leggenda
= Solo per HTML5
= Non Supportato in HTML5
= Solo per CSS3
= Non Supportato in CSS3
Elenco Attributi:
Attributo | Valore | Descrizione |
---|---|---|
class | Nome della classe | Specifica il nome della classe a cui appartiene l'elemento |
id | id (nome unico) | Specifica il nome unico (id) dell'elemento |
style | Defininizione dello stile | Specifica lo stile per l'elemento |
title | Testo informativo | Specifica informazioni aggiuntive dell'elemento |
lang | Codice linguaggio | Specifica il codice lingua del contenuto negli elementi. |
xml:lang | Codice linguaggio | Specifica il codice lingua del contenuto negli elementi in documenti XHTML. |
dir | rtl ltr |
Specifica la direzione del testo contenuto negli elementi. |
align | right left center justify char |
Indica l'allineamento del contenuto all'interno del'elemento |
valign | top middle bottom baseline |
Indica l'allineamento verticale del contenuto all'interno del'elemento |
char | carattere | Indica il carattere d'allineamento del contenuto |
charoff | numero | Indica il numero di caratteri contenuto che sarà allineata dal carattere specificato dall'attributo "char" |
Elenco Attributi HTML:
accesskey | Valore tasto | una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento | |
contenteditable | true false |
Indica se il contenuto di un elemento è modificabile o meno | |
contextmenu | menu (id) | Indica un menu contestuale per un elemento, appare il menu contestuale quando un utente fa clic-destro sull'elemento | |
data-* | Valore | Utilizzato per memorizzare dati personalizzati privati dalla pagina o applicazione | |
draggable | true false auto |
Indica se è possibile trascinare l'elemento | |
dropzone | copy move link |
Indica se i dati trascinati devono essere copiati, spostati, o collegati al rilascio | |
hidden | hidden | Indica sè un elemento non è visible | |
itemid | -- | API sperimentale (attualmente non deve essere utilizzata) | |
itemprop | -- | API sperimentale (attualmente non deve essere utilizzata) | |
itemref | -- | API sperimentale (attualmente non deve essere utilizzata) | |
itemscope | -- | API sperimentale (attualmente non deve essere utilizzata) | |
itemtype | -- | API sperimentale (attualmente non deve essere utilizzata) | |
spellcheck | true false |
Indica se l'elemento ha controllo ortografico e grammaticale | |
tabindex | Numero | Sovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato | |
translate | yes no |
Indica se il contenuto di un elemento dovrebbe essere tradotto |
Attributi Evento:
Attributo Evento | Valore | Descrizione |
---|---|---|
onblur | Codice Script | Lo script viene eseguito quando un elemento perde il focus |
onchange | Codice Script | Lo script viene eseguito quando un elemento controllo perde il focus e il suo valore è stato modificato. Questo attributo si applica ai seguenti elementi: INPUT, SELECT e TEXTAREA |
onclick | Codice Script | Lo script viene eseguito al click del mouse |
ondblclick | Codice Script | Lo script viene eseguito al doppio click del mouse |
onfocus | Codice Script | Lo script viene eseguito quando quando un elemento riceve il focus. Questo attributo può essere usato con i seguenti elementi: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, e BUTTON. |
onload | Codice Script | Lo script viene eseguito al caricamento del documento. Questo attributo può essere usato con gli elementi BODY e FRAMESET. |
onmousedown | Codice Script | Lo script viene eseguito quando viene premuto il pulsante sinistro del mouse |
onmousemove | Codice Script | Lo script viene eseguito quando il puntatore del mouse si muove dentro un elemento |
onmouseout | Codice Script | Lo script viene eseguito quando il puntatore del mouse si muove fuori da un elemento |
onmouseover | Codice Script | Lo script viene eseguito quando il puntatore del mouse si trova sopra un elemento |
onmouseup | Codice Script | Lo script viene eseguito quando il pulsante sinistro del mouse viene rilasciato |
onreset | Codice Script | Lo script viene eseguito quando un modulo viene azzerato. Si applica solo all'elemento FORM. |
onselect | Codice Script | Lo script viene eseguito quando un utente seleziona del testo in un campo di testo. Questo attributo può essere usato con gli elementi INPUT e TEXTAREA. |
onsubmit | Codice Script | Lo script viene eseguito quando viene inviato un modulo. Si applica solo all'elemento FORM. |
onkeydown | Codice Script | Lo script viene eseguito quando viene premuto un tasto |
onkeypress | Codice Script | Lo script viene eseguito quando un tasto viene premuto e rilasciato |
onkeyup | Codice Script | Lo script viene eseguito quando viene rilasciato un tasto |
onunload | Codice Script | Lo script viene eseguito quando un documento viene chiuso. Questo attributo può essere usato con gli elementi BODY e FRAMESET. |
Attributi Evento HTML:
onabort | Codice Script | -- | |
onautocomplete | Codice Script | -- | |
onautocomplete |
Codice Script | -- | |
oncancel | Codice Script | -- | |
oncanplay | Codice Script | Lo script viene eseguito quando il browser stima che la risorsa media potrebbe non essere riprodotta con valore di rate corrente fino alla fine senza pause per il buffering | |
oncanplay |
Codice Script | Lo script viene eseguito quando il browser stima che la risorsa media potrebbe essere riprodotta con valore di rate corrente fino alla fine senza pause per il buffering | |
onclose | Codice Script | -- | |
oncontextmenu | Codice Script | Lo script viene eseguito quando un menu contestuale viene attivato | |
oncuechange | Codice Script | Lo script viene eseguito quando uno o più spunti nella traccia sono diventate attive o smesso di essere attiva | |
ondrag | Codice Script | Lo script viene eseguito quando un elemento viene trascinato | |
ondragend | Codice Script | Lo script viene eseguito al termine di un'operazione di trascinamento | |
ondragenter | Codice Script | Lo script viene eseguito quando un elemento viene trascinato su una destinazione di rilascio valida | |
ondragexit | Codice Script | -- | |
ondragleave | Codice Script | Lo script viene eseguito quando un elemento lascia una destinazione di rilascio valida | |
ondragover | Codice Script | Lo script viene eseguito quando un elemento viene trascinato su una destinazione di rilascio valida | |
ondragstart | Codice Script | Lo script viene eseguito all'inizio di un'operazione di trascinamento | |
ondrop | Codice Script | Lo script viene eseguito quando l'elemento trascinato viene rilasciato | |
ondurationchange | Codice Script | Lo script viene eseguito quando l'attributo "duration" viene aggiornato. | |
onemptied | Codice Script | Lo script viene eseguito quando il file è improvvisamente non disponibile a causa di un errore fatale durante il caricamento o perché il metodo load() è stato richiamato mentre l'algoritmo di selezione delle risorse era già in esecuzione | |
onended | Codice Script | Lo script viene eseguito quando il supporto multimediale è arrivare alla fine | |
onerror | Codice Script | Lo script viene eseguito quando si verifica un errore | |
oninput | Codice Script | Lo script viene eseguito quando un elemento riceve l'input dell'utente | |
oninvalid | Codice Script | Lo script viene eseguito quando un elemento non è valido | |
onloadeddata | Codice Script | Lo script viene eseguito quando il browser carica i dati multimediali nella posizione di riproduzione corrente per la prima volta | |
onloaded |
Codice Script | Lo script viene eseguito quando i metadati (dimensioni, durata, tracce di testo) sono stati caricati | |
onloadstart | Codice Script | Lo script viene eseguito quando inizia a caricare i dati multimediali | |
onmouseenter | Codice Script | -- | |
onmouseleave | Codice Script | -- | |
onmousewheel | Codice Script | -- | |
onpause | Codice Script | Lo script viene eseguito quando l'utente ha messo in pausa la riproduzione o tramite il metodo pause() | |
onplay | Codice Script | Lo script viene eseguito quando il browser ha avviato la riproduzione, tramite il metodo play() o l'attributo "autoplay" ha iniziato la riproduzione | |
onplaying | Codice Script | Lo script viene eseguito quando la riproduzione è pronto per iniziare, dopo essere stato messo in pausa o ritardata a causa della mancanza di dati multimediali | |
onprogress | Codice Script | Lo script viene eseguito quando il browser sta recuperando dati multimediali | |
onratechange | Codice Script | Lo script viene eseguito ogni volta che cambia la velocità di riproduzione | |
onresize | Codice Script | Lo script viene eseguito quando la finestra del browser viene ridimensionata | |
onscroll | Codice Script | Lo script viene eseguito quando si scorre la barra di scorrimento di un elemento | |
onseeked | Codice Script | Lo script viene eseguito quando l'attributo "seeking" è impostato su false per indicare che ricerca è finita, e dopo la posizione di riproduzione corrente è stata cambiata | |
onseeking | Codice Script | Lo script viene eseguito quando l'attributo "seeking" è impostata su true per indicare che la ricerca è attiva, e dopo che la posizione di riproduzione ha iniziato a spostarsi in una nuova posizione | |
onshow | Codice Script | Lo script viene eseguito quando un elemento <menu> mostra un menu contestuale | |
onsort | Codice Script | -- | |
onstalled | Codice Script | Lo script viene eseguito quando il browser non può recuperare i dati multimediali per qualsiasi motivo | |
onsuspend | Codice Script | Lo script viene eseguito in caso di arresto durante il recupero i dati dei media per qualsiasi motivo | |
ontimeupdate | Codice Script | Lo script viene eseguito quando la posizione di riproduzione è cambiata | |
ontoggle | Codice Script | Lo script viene eseguito quando l'utente apre o chiude l'elemento <details> | |
onvolumechange | Codice Script | Lo script viene eseguito ogni volta che l'attributo "volume" o l'attributo "mute" cambia | |
onwaiting | Codice Script | Lo script viene eseguito quando l'elemento <video> o <audio> si ferma perché il fotogramma successivo non è ancora disponibile (buffer) in attesa di riprendere | |
NOTE: Si consiglia di scrivere SEMPRE i tag, gli Attributi e gli Attributi Evento in minuscolo. |