Stile tabella HTML
Usa i CSS per migliorare l'aspetto delle tue tabelle.
Tabella HTML - Strisce Zebra
Se aggiungi un colore di sfondo su ogni altra riga della tabella, otterrai un bel effetto zebrato.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Per applicare uno stile a ogni altro elemento della riga della tabella, utilizzare il :nth-child(even)
selettore in questo modo:
Esempio
tr:nth-child(even) {
background-color: #D6EEEE;
}
Nota: se si utilizza (odd)invece di
(even), lo stile avverrà sulla riga 1,3,5 ecc. invece di 2,4,6 ecc.
Tabella HTML - Strisce Zebrate Verticali
Per creare strisce zebrate verticali, modella ogni altra colonna , invece che ogni altra riga .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Imposta gli :nth-child(even)elementi di dati for table in questo modo:
Esempio
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Nota: posiziona il :nth-child()selettore su entrambi gli elementi the td
se desideri avere lo stile sia sulle intestazioni che sulle normali celle della tabella.
Combina strisce zebra verticali e orizzontali
Puoi combinare lo stile dei due esempi sopra e avrai strisce su ogni altra riga e ogni altra colonna.
Se usi un colore trasparente otterrai un effetto di sovrapposizione.
Usa un rgba()colore per specificare la trasparenza del colore:
Esempio
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Divisori orizzontali
| Nome di battesimo | Cognome | Risparmio |
|---|---|---|
| Peter | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Gio | Swanson | $ 300 |
Se specifichi i bordi solo nella parte inferiore di ogni riga della tabella, avrai una tabella con divisori orizzontali.
Aggiungi la border-bottomproprietà a tutti
trgli elementi per ottenere divisori orizzontali:
Esempio
tr {
border-bottom: 1px solid #ddd;
}
Tavolo mobile
Utilizzare il :hoverselettore su
trper evidenziare le righe della tabella al passaggio del mouse:
| Nome di battesimo | Cognome | Risparmio |
|---|---|---|
| Peter | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Gio | Swanson | $ 300 |
Esempio
tr:hover {background-color: #D6EEEE;}