In HTML, le tabelle sono utilizzate per organizzare e visualizzare i dati in una forma tabulare. Una tabella è composta da righe (tr) e colonne (td), con un'opzionale riga di intestazione (th) per identificare i nomi delle colonne.
- tr == table row, ovvero riga; definendo una table row, si aggiunge una riga alla tabella
- th == table header, ovvero testata; definendo una th, definite i titoli di ogni colonna
- td == table data; ogni td equivale ad una singola cella; più le td, più le colonne che occuperete per quella riga
Per cui, se io ho una tabella con quattro th, definirò una tabella di quattro colonne. Ogni tr dovrà quindi avere un td per ogni colonna. Oltre questi, esistono anche colonne, attributi e molto altro ancora.
- colgroup == definisce il numero di colonne
- col == per ogni col in un colgroup aggiungiamo una colonna alla nostra tabella
- colspan == attributo di un th/td; definisce quante colonne occupa un tr o un td
- rowspan == attributo di un td; definisce quante righe occupa una cella
| Nome | Cognome | Età |
|---|---|---|
| Mario | Rossi | 35 |
| Giovanna | Bianchi | 28 |
<table>
<thead>
<th>Nome</th>
<th>Cognome</th>
<th>Età</th>
</thead>
<tbody>
<tr>
<td>Mario</td>
<td>Rossi</td>
<td>35</td>
</tr>
<tr>
<td>Giovanna</td>
<td>Bianchi</td>
<td>28</td>
</tr>
</tbody>
</table>
Ripassiamo insieme:
La tabella sotto è composta da:
- un thead, con dentro un tr e due th (Elemento, Funzione)
- un tbody, con dentro varie tr, ed ognuna due td (elemento a sx, descrizione a dx)
| Elemento | Funzione |
|---|---|
| <table> | Apre e chiude una tabella |
| <th> | Definisce le header della tabella |
| <tr> | Definisce le row della tabella |
| rowspan | Attributo di <tr>; definisce quante righe della tabella ricopre una cella |
| <td> | Definisce una cella; all'interno di una tr, ogni td comporrà un singola cella in orizzontale |
| <caption> | Elemento che può essere aggiunto ad una tabella per aggiungere testo sopra/sotto l'effettiva tabella |
| <colgroup> | Specifica il gruppo dove verranno aggiunte le colonne |
| <col> | Specifica le proprietà di ogni colonna all'interno di un <colgroup> |
| colspan | attributo di <col>; definisce per quante colonne si allarga una singola <col> |
| <thead> | Raggruppa il contenuto dell'header |
| <tbody> | Raggruppa il corpo di una tabella |
| <tfoot> | Raggruppa il footer di una tabella |
Esercizio di oggi
Riproduciamo insieme la tabella che vediamo qui sotto. Vedremo insieme la soluzione tra 10 minuti.
Per l'esercizio aggiungi questo elemento così da mostrare i bordi della tabella:
table, th, td {
border: 1px solid black;
}
