<tbody>: l'elemento "corpo della tabella"

L' elemento HTML <tbody> incapsula un insieme di righe di tabella (elementi <tr>), indicando che costituiscono il corpo della tabella (<table>).

L'elemento <tbody>, insieme ai suoi cugini <thead> e <tfoot>, fornisce informazioni semantiche utili che possono essere utilizzate durante il rendering per schermo o stampante, nonché per scopi di accessibilità.

Attributi

Attributi deprecati

align

Questo attributo enumerato specifica come verrà gestito l'allineamento orizzontale del contenuto di ciascuna cella. I valori possibili sono:

• left, allineando il contenuto a sinistra della cella
• center, centrando il contenuto della cella
• right, allineando il contenuto a destra della cella
• justify, inserendo spazi nel contenuto testuale in modo che il contenuto sia giustificato nella cella
• char, allineando il contenuto testuale su un carattere speciale con un offset minimo, definito dagli attributi char e charoff.

Se questo attributo non è impostato, viene assunto il valore left.

Poiché questo attributo è deprecato, utilizza invece la proprietà CSS text-align.

bgcolor

Il colore di sfondo del tavolo. È un codice RGB esadecimale a 6 cifre , preceduto da un '#'.

Per ottenere un effetto simile, usa la proprietà CSS background-color.

char

Questo attributo viene utilizzato per impostare il carattere su cui allineare le celle in una colonna. I valori tipici per questo includono un punto (.) quando si tenta di allineare numeri o valori monetari. Se align non è impostato su char, questo attributo viene ignorato.

charoff

Questo attributo viene utilizzato per indicare il numero di caratteri per compensare i dati della colonna dai caratteri di allineamento specificati dall'attributo char.

valign

Questo attributo specifica l'allineamento verticale del testo all'interno di ogni riga di celle dell'intestazione della tabella. I possibili valori per questo attributo sono:

• baseline, che metterà il testo il più vicino possibile alla parte inferiore della cella, ma lo allineerà alla linea di base dei caratteri anziché alla parte inferiore di essi. Se i caratteri sono tutti della dimensione, questo ha lo stesso effetto di bottom.
• bottom, che metterà il testo il più vicino possibile alla parte inferiore della cella;
• middle, che centra il testo nella cella;
• top, che metterà il testo il più vicino possibile alla parte superiore della cella.

Poiché questo attributo è deprecato, utilizza invece la proprietà CSS vertical-align.

Note d'uso

• Se la tabella include un blocco <thead> (per identificare semanticamente le righe di intestazione), il blocco <tbody> deve essere successivo.
• Se usi <tbody>, non puoi avere anche righe di tabella (elementi <tr>) che sono figli diretti di <table> ma non sono incluse all'interno di <tbody>. Tutte le righe senza intestazione e senza piè di pagina devono trovarsi all'interno di <tbody> se ne viene utilizzata una.
• Quando si stampa un documento, gli elementi <thead> e <tfoot> specificano informazioni che possono essere le stesse, o almeno molto simili, su ogni pagina di una tabella a più pagine, mentre il contenuto dell'elemento <tbody> generalmente differirà da pagina a pagina.
• Quando una tabella viene presentata in un contesto dello schermo (come una finestra) che non è abbastanza grande per visualizzare l'intera tabella, il programma utente può consentire all'utente di scorrere il contenuto dei blocchi <thead>, <tbody>, <tfoot>, e <caption> separatamente l'uno dall'altro per lo stesso tabella padre.
• Puoi usare più di un per tavolo purché siano tutti consecutivi. Ciò consente di dividere le righe in tabelle di grandi dimensioni in sezioni, ognuna delle quali può essere formattata separatamente, se lo si desidera.

Esempio

Di seguito sono riportati alcuni esempi che mostrano l'uso dell'elemento <tbody>,. Per altri esempi di questo tag in uso, vedere gli esempi per <table>.

HTML

L'HTML della tabella è mostrato qui. Nota che tutte le cellule del corpo, comprese le informazioni sugli studenti, sono contenute in un singolo elemento <tbody>.

<table>
  <thead>
    <tr>
      <th>ID Studente</th>
      <th>Nome</th>
      <th>Corso</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones. Martha</td>
      <td>Computer Science</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Letteratura russa</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrofisica</td>
    </tr>
  </tbody>
</table>

CSS

Il CSS per lo stile della nostra tabella è mostrato di seguito.

table {
  border: 2px solid #55;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

Innanzitutto, vengono impostati gli attributi di stile generali della tabella, configurando lo spessore, lo stile e il colore dei bordi esterni della tabella e utilizzando border-collapse per garantire che le linee di confine siano condivise tra celle adiacenti anziché ciascuna con i propri bordi con spazio in mezzo. font viene utilizzato per stabilire un carattere iniziale per la tabella.

th, td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

Quindi lo stile viene impostato per la maggior parte delle celle nella tabella, comprese tutte le celle di dati ma anche gli stili condivisi tra le celle <td> e <th>. Alle celle viene assegnato un contorno grigio chiaro dello spessore di un singolo pixel, il riempimento viene regolato e tutte le celle vengono allineate a sinistra utilizzando text-align.

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

Infine, alle celle di intestazione contenute nel blocco <thead> viene assegnato uno stile aggiuntivo. Usano un background-color più scuro, una dimensione del carattere più grande e un bordo inferiore più spesso e più scuro rispetto agli altri bordi delle celle.