Per rendere le tabelle più facili da leggere, è spesso utile dare uno stile alle righe con colori di sfondo alternati. Uno dei modi più comuni per definire lo stile delle tabelle consiste nell'impostare il colore di sfondo di ogni altra riga. Questo è spesso indicato come "strisce zebrate".
Puoi farlo impostando ogni altra riga con una classe CSS e quindi definendo lo stile per quella classe. Funziona ma non è il modo migliore o più efficiente per farlo. Quando si utilizza questo metodo, ogni volta che è necessario modificare quella tabella potrebbe essere necessario modificare ogni singola riga della tabella per assicurarsi che ogni riga sia coerente con le modifiche. Ad esempio, se inserisci una nuova riga nella tabella, ogni altra riga sotto di essa deve cambiare la classe.
CSS rende facile lo stile dei tavoli con strisce zebrate. Non è necessario aggiungere alcun extra HTML attributi o classi CSS, basta usare: nth-of-type (n) Selettore CSS.
Il selettore: nth-of-type (n) è una pseudo-classe strutturale in CSS che consente di applicare uno stile agli elementi in base alle loro relazioni con gli elementi padre e fratello. Puoi usarlo per selezionare uno o più elementi in base al loro ordine di origine. In altre parole, può corrispondere a ogni elemento che è l'ennesimo figlio di un particolare tipo del suo genitore.
La lettera n può essere una parola chiave (ad esempio pari o dispari), un numero o una formula.
Ad esempio, per applicare uno stile a ogni altro tag di paragrafo con un colore di sfondo giallo, il tuo documento CSS includerebbe:
p: n-esimo di tipo (dispari) {
fondo: giallo;
}
Inizia con la tua tabella HTML
Innanzitutto, crea la tua tabella come la scriveresti normalmente in HTML. Non aggiungere classi speciali alle righe o alle colonne.
Nel tuo foglio di stile, aggiungi il seguente CSS:
tr: n-esimo di tipo (dispari) {
colore di sfondo:#ccc;
}
Questo modellerà ogni altra riga con un colore di sfondo grigio a partire dalla prima riga.
Stile colonne alternate nello stesso modo
Puoi applicare lo stesso tipo di stile alle colonne delle tabelle. Per farlo, cambia semplicemente tr nella tua classe CSS in td. Per esempio:
td: n-esimo di tipo (dispari) {
colore di sfondo:#ccc;
}
Utilizzo di formule in un selettore n-esimo di tipo (n)
La sintassi per una formula utilizzata nel selettore è an+b.
- a è un numero che rappresenta il ciclo o la dimensione dell'indice.
- n è in realtà la lettera "n" e rappresenta un contatore, che inizia a 0.
- + è un operatore, che può anche essere "-"
- b è un numero intero e rappresenta il valore di offset, ad esempio quante righe in basso il selettore dovrebbe iniziare ad applicare il colore di sfondo. Questo è necessario se nella formula è incluso un operatore.
Ad esempio, se desideri impostare un colore di sfondo per ogni 3a riga, la tua formula sarà 3n+0. Il tuo CSS potrebbe assomigliare a questo:
tr: ennesimo tipo (3n+0) {
fondo: grigio ardesia;
}
Strumenti utili per l'utilizzo del selettore di tipo n-esimo
Se ti senti un po' intimidito dall'aspetto della formula dell'uso del selettore n-th-of-type di pseudo-classe, prova il: ennesimo sito Tester come uno strumento utile che può aiutarti a definire la sintassi per ottenere l'aspetto desiderato. Usa il menu a discesa per selezionare nth-of-type (puoi anche sperimentare con altre pseudo-classi qui, come nth-child).