HTML Academy · Lezione

table, tr, td e th

Creare tabelle di base con righe, celle di dati e celle di intestazione

table, tr, td e th è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Tabelle HTML

Le tabelle visualizzano i dati in righe e colonne. Le utilizzi per i dati tabellari — non per il layout della pagina.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Gli elementi table, tr, td

Elementi fondamentali delle tabelle:

<table> — il contenitore della tabella
<tr> — una riga della tabella
<td> — una cella di dati della tabella
<th> — una cella di intestazione della tabella (in grassetto e centrata per impostazione predefinita)

th e td a confronto

Utilizzi <th> per le celle di intestazione, perché hanno un significato semantico:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Struttura di base di una tabella

Una tabella minima ma completa:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Bordi delle tabelle con CSS

Per impostazione predefinita, i browser visualizzano le tabelle senza bordi. Li aggiunga con i CSS:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Le tabelle non servono per il layout

Negli anni Novanta, le tabelle venivano utilizzate per il layout delle pagine. Questa pratica è obsoleta e dannosa:

I lettori di schermo interpretano le tabelle come dati: le tabelle usate per il layout confondono gli utenti
Le tabelle sono poco flessibili sugli schermi piccoli
CSS Grid e Flexbox hanno sostituito le tabelle per tutte le esigenze di layout
Utilizzi <table> solo per dati realmente tabellari

Tabelle responsive

Sugli schermi piccoli, le tabelle possono fuoriuscire dall'area visibile. Le racchiuda in un contenitore per consentire lo scorrimento orizzontale:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Celle vuote

Gestisca le celle vuote in modo intenzionale:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Anteprima di thead e tbody

Le tabelle dovrebbero utilizzare <thead> e <tbody> per separare le righe di intestazione dalle righe di dati: questo argomento verrà trattato nella lezione successiva:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col e colgroup per lo stile delle colonne

Applichi gli stili a intere colonne con <colgroup> e <col>:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Alternanza dei colori delle righe con CSS

Alterni i colori delle righe per facilitare la lettura:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Verifica rapida

Qual è la differenza tra td e th in una tabella?

Riepilogo: table, tr, td, th

Concetti fondamentali delle tabelle:

<table> — contenitore della tabella
<tr> — riga della tabella
<td> — cella di dati
<th> — cella di intestazione (semantica, in grassetto per impostazione predefinita)
Utilizzi border-collapse: collapse per ottenere bordi uniformi
Le tabelle servono solo per i dati, non per il layout della pagina

Domande Frequenti

La lezione «table, tr, td e th» è gratuita?

Sì — il testo completo di «table, tr, td e th» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «table, tr, td e th»?

Creare tabelle di base con righe, celle di dati e celle di intestazione Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «table, tr, td e th»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy