W3docs
it
Accedi

Tabelle CSS

Come stilizzare le tabelle con CSS: colore, bordi compressi, larghezza, altezza, allineamento del testo e padding. Esempi inclusi.

Le tabelle HTML rese dal browser in modo predefinito sono semplici: bordi doppi sottili, celle strette e nessuna separazione visiva tra le righe. CSS le trasforma in visualizzazioni di dati leggibili e scorrevoli. Questo capitolo illustra le proprietà che contano per le tabelle — bordi, spaziatura, allineamento e stile delle righe — e termina con pattern che utilizzerai ancora e ancora: divisori, evidenziazione al passaggio del mouse, righe alternate (zebra) e scorrimento orizzontale su schermi piccoli.

Ogni esempio di seguito è una pagina completa e funzionante, quindi puoi aprirla, modificare un valore e vedere subito l'effetto.

Proprietà di Stile per le Tabelle

Ecco le proprietà CSS utilizzate per stilizzare una tabella. Le proprietà background-color e color impostano rispettivamente i colori di sfondo e del testo. La proprietà border-collapse comprime i bordi della tabella. La proprietà text-align imposta l'allineamento orizzontale del testo. Inoltre, puoi usare height, width e padding per regolare il layout.

Esempio di stilizzazione di una tabella:

Esempio di stilizzazione di tabelle HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Provalo tu stesso »

Risultato

Esempio di tabella

Spieghiamo il codice sopra.

Come puoi vedere, la nostra tabella ha due sezioni principali: la sezione <thead> per le intestazioni e la sezione <tbody> per le righe di dati. La tabella usa bordi neri, applicati tramite la proprietà border. Puoi usare qualsiasi colore e stile di bordo tu preferisca.

Colore della tabella

La riga di intestazione (<thead>) è blu con testo bianco. Il riempimento blu deriva dalla proprietà background-color, e il testo bianco dalla proprietà color — entrambe applicate al selettore thead in modo che ogni cella di intestazione al suo interno le erediti. Le celle del corpo riprendono il testo nero predefinito della pagina su sfondo bianco (o a righe alternate).

Comprimere i Bordi

Per impostazione predefinita, una tabella disegna due bordi tra celle adiacenti — uno per ogni cella — che produce uno spazio visibile e una linea doppia. La proprietà border-collapse controlla questo comportamento:

  • border-collapse: separate (il predefinito) mantiene i bordi di ciascuna cella distinti.
  • border-collapse: collapse unisce i bordi adiacenti in una singola linea, dando l'aspetto pulito e a griglia usato in ogni esempio di questa pagina.

Quasi sempre vorrai usare collapse per le tabelle di dati.

Larghezza e Altezza della Tabella

Usa width sul selettore table per controllare lo spazio orizzontale occupato dalla tabella — width: 100% la fa riempire il suo contenitore, che è la scelta più comune. Usa height su th (o td) per dare respiro alle righe. Entrambe accettano pixel (50px) per una dimensione fissa o percentuali (100%) per una dimensione relativa al genitore. Nota che una height in percentuale funziona solo se il genitore ha un'altezza nota, quindi i valori fissi sono più affidabili per le righe.

Allineamento del Testo nella Tabella

La proprietà text-align imposta l'allineamento orizzontale del contenuto delle celle. I browser impostano di default il testo <th> su center e il testo <td> su left, quindi imposti text-align solo quando vuoi sovrascrivere questo comportamento — ad esempio, text-align: center su th per mantenere le intestazioni centrate, o text-align: right per allineare le colonne numeriche alle cifre. La sezione successiva mostra un esempio completo.

Padding della Tabella

Per controllare lo spazio tra il bordo e il contenuto in una tabella, usa la proprietà padding sugli elementi <td> e <th>:

Padding nelle tabelle HTML

td, th {
  padding: 15px;
}

Allineamento orizzontale con la proprietà text-align

Con l'aiuto della proprietà CSS text-align, puoi impostare l'allineamento orizzontale del contenuto in <th> o <td>.

Per impostazione predefinita, il contenuto degli elementi <td> è allineato a sinistra e il contenuto degli elementi <th> è allineato al centro. Nell'esempio qui sotto, il contenuto degli elementi <th> e <td> è allineato a destra:

Esempio di allineamento del contenuto degli elementi <th> e <td> a destra:

Esempio di allineamento del contenuto degli elementi <th> e <td> a destra

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
       text-align: right;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Whatson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Provalo tu stesso »

Allineamento verticale con la proprietà vertical-align

Utilizzando la proprietà CSS vertical-align, puoi impostare l'allineamento verticale del contenuto in <th> o <td>.

Per impostazione predefinita, il contenuto sia degli elementi <th> che <td> è allineato verticalmente al centro.

Nell'esempio qui sotto, il contenuto degli elementi <td> è allineato verticalmente in basso:

Esempio di allineamento verticale del contenuto degli elementi <td> in basso:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td {
        height: 50px;
        vertical-align: bottom;
        text-align: right;
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$300</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Provalo tu stesso »

Divisori orizzontali

Aggiungendo la proprietà CSS border-bottom agli elementi <td> e <th>, creerai dei divisori orizzontali.

Esempio di creazione di divisori orizzontali:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal dividers example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Provalo tu stesso »

Tabelle con hover

Usando il selettore CSS :hover sull'elemento <tr>, la tabella risponderà al passaggio del mouse.

Esempio di creazione di una tabella con hover:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      tr {
        background-color: #f5f5f5;
      }
      th,
      td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ccc;
      }
      tr:hover {
        background-color: #cdcdcd;
      }
    </style>
  </head>
  <body>
    <h2>Hoverable table example</h2>
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Provalo tu stesso »

Tabella a righe alternate (zebra)

Usando il selettore nth-child() e aggiungendo la proprietà CSS background-color alle righe dispari (pari) della tabella, puoi creare una tabella a righe alternate (effetto zebra).

Esempio di creazione di una tabella a righe alternate:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 10px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Striped table example</h2>
    <table>
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Provalo tu stesso »

Tabelle responsive

Una tabella ampia può superare i bordi degli schermi stretti e rompere il layout della pagina. Per rendere una tabella responsive, avvolgila in un elemento contenitore (qui un <div>) e applica overflow-x: auto a quel contenitore. Quando la tabella è più larga del viewport, il contenitore mostra una barra di scorrimento orizzontale invece di estendere la pagina — le righe rimangono intatte e l'utente scorre semplicemente di lato.

Esempio di creazione di una tabella responsive:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-x: auto;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 8px 5px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Responsive table example</h2>
    <div>
      <table>
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sherlock</td>
            <td>Holmes</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
          </tr>
          <tr>
            <td>John</td>
            <td>Watson</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Watson</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
Provalo tu stesso »

Argomenti Correlati

Esercitati

Pratica
Quali proprietà CSS possono essere applicate alle tabelle?
Quali proprietà CSS possono essere applicate alle tabelle?
Was this page helpful?