Intestazioni di tabelle HTML
Le tabelle HTML possono avere intestazioni per ogni colonna o riga o per molte colonne/righe.
| EMIL | TOBIAS | LINO |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| LUN | MAR | MER | RACCOGLIERE | VEN | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DICEMBRE | ||
|---|---|---|
Intestazioni di tabelle HTML
Le intestazioni delle tabelle sono definite con thelementi, ogni thelemento rappresenta una cella della tabella.
Esempio
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Intestazioni di tabelle verticali
Per utilizzare la prima colonna come intestazioni di tabella, definire la prima cella di ogni riga come thelemento:
Esempio
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Allinea le intestazioni delle tabelle
Per impostazione predefinita, le intestazioni delle tabelle sono in grassetto e centrate:
| Nome di battesimo | Cognome | Età |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
Per allineare a sinistra le intestazioni delle tabelle, utilizza la text-alignproprietà CSS:
Esempio
th {
text-align: left;
}
Intestazione per più colonne
Puoi avere un'intestazione che si estende su due o più colonne.
| Nome | Età | |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
Per fare ciò, usa l' colspanattributo
<th>sull'elemento:
Esempio
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Imparerai di più su colspan e rowspan nel capitolo Table colspan & rowspan .
Didascalia
È possibile aggiungere una didascalia che funge da intestazione per l'intera tabella.
| Mese | Risparmio |
|---|---|
| gennaio | $ 100 |
| febbraio | $ 50 |
Per aggiungere una didascalia a una tabella, utilizza il <caption>tag:
Esempio
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Nota: il <caption>tag deve essere inserito subito dopo il <table>tag.