Tabella CSS

Utilizzando CSS è possibile migliorare notevolmente l'aspetto delle tabelle HTML:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Prova a farlo tu stesso

Bordi della tabella

Per impostare i bordi della tabella in CSS, utilizzare border Attributo.

Esempio di definizione di bordi neri per gli elementi <table>, <th> e <td>:

Nome Cognome
Bill Gates
Steve Jobs

Esempio

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

Prova a farlo tu stesso

Attenzione:La tabella dell'esempio sopra ha un bordo a doppio. Questo è perché la tabella e gli elementi <th> e <td> hanno bordi separati.

Tabella a piena larghezza

In alcuni casi, la tabella sopra sembra piccola. Se si ha bisogno di una tabella che copra l'intero schermo (piena larghezza), aggiungere width: 100% all'elemento <table>:

Esempio

table {
  width: 100%;
}

Prova a farlo tu stesso

Bordo a doppio

Attenzione: la tabella sopra è a doppio bordo. Questo è perché la tabella e gli elementi th e td hanno bordi separati.

Per rimuovere i bordi doppi, vedere l'esempio seguente.

Riunione delle bordature della tabella

border-collapse Imposta se le bordature della tabella devono essere riunite in un singolo bordo:

Nome Cognome
Bill Gates
Steve Jobs

Esempio

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

Prova a farlo tu stesso

Se si desidera che ci sia solo un bordo intorno alla tabella, è sufficiente specificare per <table>: border padding

Nome Cognome
Bill Gates
Steve Jobs

Esempio

table {
  border: 1px solid black;
}

Prova a farlo tu stesso

Larghezza e altezza della tabella

La larghezza e l'altezza della tabella sono definite da width e height Definizione dell'attributo.

Esempio di impostazione della larghezza della tabella al 100% e dell'altezza dell'elemento <th> a 50px:

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esempio

table {
  width: 100%;
}
th {
  height: 50px;
}

Prova a farlo tu stesso

Per creare una tabella che occupi metà della pagina, utilizzare width: 50%:

Esempio

table {
  width: 50%;
}
th {
  height: 70px;
}

Prova a farlo tu stesso

Allineamento orizzontale

text-align Imposta l'allineamento orizzontale del contenuto degli elementi <th> o <td> (sinistra, destra o centrato).

Per impostazione predefinita, il contenuto degli elementi <th> è centrato, mentre il contenuto degli elementi <td> è allineato a sinistra.

Per centrare anche il contenuto dell'elemento <td>, utilizzare text-align: center:

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esempio

th {
  text-align: center;
}

Prova a farlo tu stesso

Esempio di allineamento a sinistra del testo dell'elemento <th>:

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esempio

th {
  padding: 15px;
}

Prova a farlo tu stesso

Allineamento verticale

vertical-align Imposta l'allineamento verticale del contenuto degli elementi <th> o <td> (alto, basso o centrato).

Per impostazione predefinita, l'allineamento verticale del contenuto della tabella è centrato (entrambi gli elementi <th> e <td> sono centrati).

Esempio di impostazione dell'allineamento verticale del testo dell'elemento <td> in basso:

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esempio

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

Prova a farlo tu stesso

表格内边距

margini interni della tabella Per controllare lo spazio tra il bordo e il contenuto della tabella, utilizzare su gli elementi <td> e <th> la proprietà padding

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esempio

proprietà, per ottenere una linea di separazione orizzontale:
  proprietà:
  padding: 15px;
}

Prova a farlo tu stesso

text-align: left;

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

linea di separazione orizzontale aggiungere alla <th> e <td> una linea di separazione orizzontale: border-bottom

Esempio

proprietà, per ottenere una linea di separazione orizzontale:
  th, td {
}

Prova a farlo tu stesso

border-bottom: 1px solid #ddd;

tabella hoverabile sul elemento <tr> per evidenziare la riga della tabella quando il mouse è sopra: :hover

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esempio

tr:hover {background-color: #f5f5f5;}

Prova a farlo tu stesso

tabella a strisce

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Per ottenere un effetto tabella a strisce, utilizzare nth-child() selettore, e aggiunge un colore di sfondo a tutte le righe tabella pari (o dispari): background-color:

Esempio

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

Prova a farlo tu stesso

Colori della tabella

L'esempio seguente specifica il colore di sfondo e il colore del testo dell'elemento <th>:

Nome Cognome Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Esempio

th {
  background-color: #4CAF50;
  color: white;
}

Prova a farlo tu stesso

Tabella responsiveness

Se lo schermo è troppo piccolo per visualizzare tutto il contenuto, la tabella responsiveness mostrerà una barra di scorrimento orizzontale:

Nome Cognome Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

Aggiungere intorno all'elemento <table> uno stile con overflow-x:auto l'elemento contenitore (ad esempio <div>), per ottenere un effetto responsiveness:

Esempio

<div style="overflow-x:auto;">
<table>
... contenuto della tabella ...
</table>
</div>

Prova a farlo tu stesso

Nota:In OS X Lion (sul Mac), la barra di scorrimento è nascosta di default e viene visualizzata solo quando utilizzata (anche se è stato impostato "overflow:scroll").

Più esempi

Creare una tabella elegante
Questo esempio dimostra come creare una tabella elegante.
Impostare la posizione del titolo della tabella
Questo esempio dimostra come posizionare il titolo della tabella.

proprietà delle tabelle CSS

proprietà descrizione
border Proprietà abbreviate. Impostare tutte le proprietà dei bordi in una singola dichiarazione.
border-collapse Definire se piegare i bordi della tabella.
border-spacing Definire la distanza tra i bordi delle celle adiacenti.
caption-side Definire la posizione del titolo della tabella.
empty-cells Definire se visualizzare i bordi e lo sfondo nelle celle vuote della tabella.
table-layout Impostare l'algoritmo di layout per la tabella.