Stilizzare tabelle html con pseudo-classi CSS

Usando metodi standard di stilizzazione posiamo  impostare lo stile per la tabella in generale  e per tutte le sue righe. Ma cosa succede se si vuole, ad esempio, selezionare una singola cella? Per non assegnare una una classe alla cellule, è possibile utilizzare una combinazione di selettori e pseudo-classi.

Questo tutorial mostra le varie opzioni per la selezione degli elementi della tabella con l'aiuto di pseudo-classi .

Noi utilizzeremo la stessa tabella in senso di markup per tutti gli esempi nel articolo
Quindi vediamo il codice HTML della tabella

<table>
<tr><th>Company</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th></tr>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40.3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.2</td><td>33.3</td><td>36.7</td></tr>
</table>

 

1. Come selezionare Prima riga della tabella

th {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

2. Selezionare ultima riga della tabella coi CSS

tr:last-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

3. Selezionare la terza riga della tabella

tr:nth-child(3){background:#C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

4. Tabela zebra ( colorare ogni riga pari)

tr:nth-child(even) {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

5. Tabela zebra (colorare ogni riga dispari)

tr:nth-child(odd) {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

6. Prima cella della prima riga della tabella

th:first-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

7. Ultima cella della prima riga della tabella

th:last-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

8. Prima cella della ultima riga della tabella

tr:last-child td:first-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

9. Ultima cella della ultima roiga della tabella

tr:last-child td:last-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

10. Terza cella della terza riga della tabella

tr:nth-child(3) td:nth-child(3) {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

11. Come selezionare prima colonna della tabella

th:first-child, td:first-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

12. Come selezionare terza colonna della tabella

Per selizionare atraverso CSS la terza colonna del nostro esempio dovremo usare pseudo-seletore td:nth-child(3)

 th:nth-child(3) {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

13. Selezionare ultima colonna della tabella

th:last-child, td:last-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

 

E per aprofondire le tue conoscenze per come creare una tabella potrai consultare anche le nostre video

animatedDude

video prevui

 

Letto 437 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso