Qual è lo scopo di HTML?

Question

Quali sono le ragioni principali per cui qualcuno userebbe l'HTML tbody in una tabella? È solo per scopi di formattazione?

Io uso head e body in generale; Non ho usato thead e tbody.

Answer 1

Per dare significato semantico alla tabella:

<table> 
    <thead> 
    <tr> 
     <th>Person</th> 
     <th>Amount</th> 
     <th>Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Person1</td> 
     <td>$5.99</td> 
     <td>02/03/09</td> 
    </tr> 
    <tr> 
     <td>Person2</td> 
     <td>$12.99</td> 
     <td>08/15/09</td> 
    </tr> 
    </tbody> 
</table> 

According to the specification:

Le righe della tabella possono essere raggruppati in una testa tavolo, piede tavolo, e una o più sezioni del corpo della tabella, utilizzando il Gli elementi THEAD, TFOOT e TBODY, rispettivamente. Questa divisione consente agli agenti utente di supportare lo scorrimento dei corpi dei tavoli indipendentemente dalla testa e dal piede del tavolo. Quando vengono stampate lunghe tabelle, le informazioni sulla testa e sul piede della tabella possono essere ripetute su ogni pagina che contiene i dati della tabella.

La testa della tabella e il piedino del tavolo devono contenere informazioni sulle colonne della tabella. Il corpo della tabella deve contenere righe di dati della tabella.

Quando presente, ogni THEAD, TFOOT e TBODY contiene un gruppo di righe. Ogni gruppo di righe deve contenere almeno una riga, definita dall'elemento TR.

Oltre all'importante importanza semantica di questo (si pensi lettori di schermo), è possibile quindi facilmente personalizzare le intestazioni oltre alle righe di dati. Un altro esempio rilevante è che i plugin jQuery come il plugin Tablesorter possono quindi facilmente capire come si presenta la struttura dei dati.

Answer 2

Per separare le parti di intestazione (thead), body (tbody) e footer (tfoot) di una tabella HTML. Questo è incredibilmente utile. Un tipico utilizzo è quello di inserire le intestazioni delle colonne nell'elemento thead e i dati nel tean. L'elemento tfoot è meno comune ma a volte utile.

A proposito, anche se non si specifica tbody, viene comunque creato implicitamente per voi.

È possibile utilizzare questo per scopi di stile anche per esempio:

table thead tr { background-color: yellow; } 
table tbody tr { background-color: #C9C9C9; } 

E 'anche utile in Javascript e jQuery per avere tabelle con righe selezionabili (proprio come un esempio). In genere, ti interessa solo selezionare o evidenziare le righe nella tomaia, non la riga dell'intestazione in alto.

Answer 3

Può essere utilizzato per lo stile, sì, ed è anche utile per i selettori jQuery per aiutare a discriminare quali elementi si desidera selezionare. Dopo tutto, è possibile avere tr tag in thead o tbody.

Answer 4

Un grande uso che ho trovato per tbody è consentire che le righe siano scorrevoli mantenendo l'intestazione e il piè di pagina della colonna visibili. Questo funziona solo nei browser che effettivamente supportano css però. Spiacente, nessun Internet Explorer!

<tbody style="height: 150px; overflow-y: scroll"> 

Answer 5

Cosa succede se l'intestazione della tabella è la prima colonna in ogni riga? In quel caso non c'è modo di specificare l'intestazione della tabella.In pratica interromperà l'HTML poiché il parser supporrà che tutto sia parte del corpo della tabella.

E perché esattamente è necessario quel tag poiché th specifica i campi dell'intestazione: il browser può scoprire quale parte della tabella è l'intestazione di questi campi.

Qual è il punto di partenza? Funzionano per alcuni casi e interrompono l'HTML in altri casi. Duplicano la funzionalità di th. Complicano il codice e possono causare problemi - Prima di conoscere Tbody ho pensato che tr-s fossero figli di tavolo.

Answer 6

Il thead, tbody e tfoot elementi in HTML sono usati per le righe della tabella di gruppo in sezioni logiche in base al loro contenuto. Ci sono due ragioni principali che ci si vuole fare questo:

1. per permettere al corpo di scorrere indipendentemente l'intestazione e/o piè di pagina
2. Per rendere più facile applicare regole di stile diversi per le diverse sezioni del tavolo

<table> 
 
    <thead> 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td>Sum</td> 
 
     <td>$180</td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table>