Stile Tabelle in CSS

Bordi delle Tabelle

Per specificare i bordi delle tabelle in CSS, utilizza la proprietà border.

L’esempio seguente specifica un bordo solido per gli elementi <table>, <th> e <td>:

table,
th,
td {
  border: 1px solid;
}

Tavola a Larghezza Intera

La tabella sopra potrebbe sembrare piccola in alcuni casi. Se hai bisogno di una tabella che dovrebbe occupare l’intero schermo (larghezza intera), aggiungi width: 100% all’elemento <table>:

table {
  width: 100%;
}

Bordi Doppi

Nota che le tabelle negli esempi sopra hanno bordi doppi. Questo perché sia la tabella che gli elementi <th> e <td> hanno bordi separati.

Per rimuovere i bordi doppi, dai un’occhiata all’esempio qui sotto.

Bordi della Tabella Unificati La proprietà border-collapse imposta se i bordi delle tabelle dovrebbero essere unificati in un singolo bordo:

table {
  border-collapse: collapse;
}

Se vuoi avere un bordo solo attorno alla tabella, specifica solo la proprietà border per <table>:

table {
  border: 1px solid;
}

Larghezza e Altezza della Tabella

La larghezza e l’altezza di una tabella sono definite dalle proprietà width e height.

L’esempio seguente imposta la larghezza della tabella al 100%, e l’altezza degli elementi <th> a 70px:

table {
  width: 100%;
}

th {
  height: 70px;
}

Per creare una tabella che dovrebbe occupare solo metà della pagina, utilizza width: 50%:

table {
  width: 50%;
}

Allineamento Orizzontale

La proprietà text-align imposta l’allineamento orizzontale (come sinistra, destra o centro) dei contenuti in <th> o <td>.

Per impostazione predefinita, i contenuti degli elementi <th> sono allineati al centro e i contenuti degli elementi <td> sono allineati a sinistra.

Per allineare al centro anche i contenuti degli elementi <td>, utilizza text-align: center:

td {
  text-align: center;
}

Per allineare a sinistra i contenuti, forza l’allineamento degli elementi <th> a sinistra, con la proprietà text-align: left:

th {
  text-align: left;
}

Allineamento Verticale

La proprietà vertical-align imposta l’allineamento verticale (come in alto, in basso o al centro) dei contenuti in <th> o <td>.

Per impostazione predefinita, l’allineamento verticale dei contenuti in una tabella è al centro (sia per gli elementi <th> che per gli elementi <td>).

L’esempio seguente imposta l’allineamento verticale del testo in basso per gli elementi <td>:

td {
  height: 50px;
  vertical-align: bottom;
}

Padding della Tabella

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

th,
td {
  padding: 15px;
  text-align: left;
}

Divisori Orizzontali

Aggiungi la proprietà border-bottom a <th> e <td> per aggiungere divisori orizzontali:

th,
td {
  border-bottom: 1px solid #ddd;
}

Tabella con Effetto Hover

Utilizza il selettore :hover su <tr> per evidenziare le righe della tabella al passaggio del mouse:

tr:hover {
  background-color: coral;
}

Tabelle a Righe Strisce

Per ottenere tabelle a righe alternate (strisce zebra), utilizza il selettore nth-child() e aggiungi un colore di sfondo a tutte le righe della tabella pari (o dispari):

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Colore della Tabella

L’esempio seguente specifica il colore di sfondo e il colore del testo degli elementi <th>:

th {
  background-color: #04aa6d;
  color: white;
}