Tag correlati alle tabelle

In questo articolo, spieghiamo i tag relativi alle tabelle.

Questo spiega come descrivere tabelle e didascalie di tabelle in HTML con esempi.

YouTube Video

Tag correlati alle tabelle

Tag <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• Il tag <table> viene utilizzato per creare una tabella che organizza e visualizza i dati in righe e colonne.

  Il tag <table> organizza visivamente i dati e crea tabelle con più righe e colonne. Le righe sono definite con il tag <tr>, le celle di intestazione con il tag <th>, e le celle di dati con il tag <td>.

• Puoi personalizzare lo stile e il layout della tabella utilizzando CSS.

Tag <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• Il tag <tr> viene utilizzato per definire le righe in una tabella.

  Il tag <tr> viene utilizzato per creare ciascuna riga di una tabella, contenente celle (<td> o <th>).

• Ogni riga può contenere più celle, formando la struttura complessiva della tabella.

Tag <th> e <td>

1<th>Header 1</th>
2<td>Data 1</td>

• Il tag <th> definisce una cella di intestazione della tabella. Tipicamente utilizzato nelle righe di intestazione, il contenuto delle celle è in grassetto e centrato.
• Il tag <td> definisce una cella di dati della tabella standard, che visualizza i dati regolari della tabella.

Attributi colspan e rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan e rowspan sono attributi utilizzati quando le celle della tabella si estendono su più colonne o righe.

• L'attributo colspan consente a una cella di estendersi su più colonne.
• L'attributo rowspan consente a una cella di estendersi su più righe.

Tag <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• Il tag <thead> viene utilizzato per definire la sezione di intestazione di una tabella. Tipicamente contiene le intestazioni delle colonne.

  Il tag <thead> è posizionato nella parte superiore della tabella, definendo i titoli o le intestazioni delle colonne. Questo aiuta a distinguere chiaramente le sezioni dei dati.

• Il tag <tbody> definisce la sezione del corpo della tabella. Contiene le righe dei dati.

  Il tag <tbody> contiene il corpo principale dei dati della tabella. È posizionato tra le righe racchiuse dai tag <thead> e <tfoot>.

• Il tag <tfoot> definisce la parte finale della tabella, che include totali o note.

  Il tag <tfoot> si trova alla fine della tabella e viene utilizzato per visualizzare i totali o altre annotazioni. È particolarmente utile quando si riassumono o si visualizzano i totali per grandi insiemi di dati.

Tag <caption> e <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• Il tag <caption> aggiunge una didascalia (titolo) per rendere più chiaro il contenuto della tabella. Di solito è posizionato nella parte superiore della tabella e serve a riassumere il contenuto complessivo della tabella.

• Il tag <colgroup> raggruppa le colonne all'interno di una tabella ed è utilizzato per applicare stili o layout. Puoi specificare colori di sfondo o larghezze per colonne specifiche includendo il tag <col>.

Esempio di tabella

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• Il tag <table> è utilizzato per creare una tabella che visualizza i dati in righe e colonne.

• Il tag <thead> raggruppa le righe di intestazione della tabella. Di solito contiene i tag <th>, che fungono da intestazioni.

• Il tag <tbody> raggruppa il contenuto principale della tabella. Di solito contiene righe di dati composte da tag <td>.

• Il tag <tfoot> raggruppa le righe del piè di pagina della tabella. È adatto per visualizzare totali o note.

• Il tag <colgroup> raggruppa le colonne di una tabella ed è utilizzato per applicare stili a tutte.

• Il tag <caption> aggiunge una didascalia o un'intestazione alla tabella, semplificando la comprensione del contenuto da parte degli utenti.

• L'attributo colspan consente a una cella di estendersi su più colonne.

• L'attributo rowspan consente a una cella di estendersi su più righe.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video