Tabelle HTML
Le tabelle HTML consentono agli sviluppatori Web di organizzare i dati in righe e colonne.
Esempio
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Definisci una tabella HTML
Una tabella in HTML è costituita da celle di tabella all'interno di righe e colonne
Esempio
Una semplice tabella HTML:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Celle di tabella
Ogni cella della tabella è definita da un
<td>e un </td>tag.
td
sta per dati di tabella.
Tutto tra <td>e </td>sono il contenuto della cella della tabella.
Esempio
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Nota: gli elementi di dati della tabella sono i contenitori di dati della tabella.
Possono contenere tutti i tipi di elementi HTML; testo, immagini, elenchi, altre tabelle, ecc.
Righe della tabella
Ogni riga della tabella inizia con a
<tr>e termina con un </tr>tag.
tr
sta per riga della tabella.
Esempio
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Puoi avere tutte le righe che vuoi in una tabella, assicurati solo che il numero di celle sia lo stesso in ogni riga.
Nota: ci sono volte in cui una riga può avere meno o più celle di un'altra. Lo imparerai in un capitolo successivo.
Intestazioni di tabella
A volte vuoi che le tue celle siano intestazioni, in quei casi usa il
<th>tag invece del
<td>tag:
Esempio
Lascia che la prima riga sia intestazioni di tabella:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Per impostazione predefinita, il testo negli <th>elementi è in grassetto e centrato, ma puoi cambiarlo con CSS.
Esercizi HTML
Tag tabella HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .