Tabelle in HTML

1. Elemento <table>

HTML offre un modo comodo per rappresentare i dati in forma strutturata usando le tabelle. Le tabelle aiutano nell'organizzazione delle informazioni in una serie di righe e colonne, rendendole utili per la rappresentazione di dati numerici, orari, listini prezzi e altri set di dati strutturati. Vediamo come vengono utilizzati i principali tag per creare tabelle: <table>, <tr>, <td> e <th>.

Il tag <table> funge da contenitore per l'intera tabella. Viene utilizzato per indicare l'inizio e la fine della tabella e contiene tutti gli altri tag correlati alla stessa.

Esempio di creazione di una tabella con il tag <table>:

<table>
  <!-- Qui si trovano le righe e le celle della tabella -->
</table>

Il tag <table> può essere ulteriormente stilizzato con l'attributo border per aggiungere un bordo alla tabella:

<table border="1">
  <tr>
    <td>Esempio di cella</td>
  </tr>
</table>

Qui l'attributo border="1" aggiunge un bordo attorno alla tabella e alle sue celle, rendendole visibili.

2. Elemento <tr>

Il tag <tr> indica una riga della tabella (table row). Ogni riga della tabella deve trovarsi all'interno del tag <tr>, che a sua volta è contenuto all'interno di <table>.

Esempio:

<table border="1">
  <tr>
    <td>Cella 1</td>
    <td>Cella 2</td>
  </tr>
  <tr>
    <td>Cella 3</td>
    <td>Cella 4</td>
  </tr>
</table>

In questo esempio la tabella è composta da due righe. Ogni riga contiene due celle.

3. Elemento <td>

Il tag <td> (table data) viene utilizzato per creare celle con dati nella tabella. Indica una cella normale della tabella, nella quale può essere inserito testo, immagini o altro contenuto HTML.

Esempio di utilizzo di <td>:

<table border="1">
  <tr>
    <td>Cella 1</td>
    <td>Cella 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Cella 1</td>
    <td>Cella 2</td>
  </tr>
</table>

Le celle <td> contengono il contenuto principale della tabella e si trovano all'interno delle righe <tr>.

4. Elemento <th>

Il tag <th> (table header) viene utilizzato per creare le intestazioni della tabella. Le celle create con <th> sono per default in grassetto e allineate al centro. È utile per indicare le intestazioni delle colonne o righe.

Esempio di tabella con intestazioni: