Tabella CSS Colore della riga alternativa

Possiamo colorare le righe alternative per rendere la nostra tabella più intuitiva e consentire all'utente di sfogliare rapidamente i dati. Possiamo usare la proprietà CSS per modificare il colore delle righe alternative per attirare l'attenzione dell'utente su di esse. Un selettore di stile in CSS viene utilizzato per cambiare le righe alternative. Utilizzando il selettore in stile CSS, è possibile modificare facilmente il colore delle righe alternative. Il selettore di nth-child () in CSS prende un parametro uniforme o dispari e quindi modifica il colore usando la proprietà di sfondo all'interno di questo selettore di stile. In questo tutorial, modificheremo il colore delle file pari e dispari in diversi modi.

Sintassi:

Esempio 1:

Crea un file HTML per creare tabelle con righe e colonne. Usa il selettore in stile CSS per cambiare il colore delle righe alternative. Il codice Visual Studio è il software che utilizziamo per eseguire questi esempi. Di conseguenza, dobbiamo creare un file HTML e inserire il codice HTML per creare la tabella. Il codice HTML per la costruzione della tabella può essere visualizzato qui e il file deve essere salvato con ".Estensione HTML ".

Qui, creiamo una tabella e popola le sue righe e colonne con i dati. IL ""Viene utilizzato per definire le celle di intestazione del tavolo,""Viene utilizzato per definire le righe del tavolo e""Viene utilizzato per creare la cella di dati nelle righe. Quindi, dentro il ""Tag, aggiungiamo i dati a queste celle e queste"I tag sono all'interno del ""Tag, che rappresenta una riga. Popoliamo tutte le righe con i dati. Dopo aver generato questo semplice tavolo, dobbiamo modellarlo e modificare il colore delle righe alternative usando il selettore di stile.

Il codice dato viene utilizzato per colorare le righe alternative della tabella che abbiamo generato. Poiché è il nostro file CSS in cui utilizziamo il selettore in stile CSS per modificare il colore alternativo delle righe, viene salvato con ".Estensione del file CSS ". Usiamo la proprietà "Collapse a confine" per modellare prima il tavolo, il che controlla se il bordo del tavolo collassa in un singolo bordo o se è diviso. In questo caso lo configuramo per "crollare". Come risultato dell'utilizzo, ora abbiamo un bordo della tabella singola. La larghezza di questa tabella è impostata sul "100 percento."

Quindi, ci sono "Th" e "TD" che rappresentano rispettivamente l'intestazione e le celle semplici. Ora, modellali applicando la proprietà "allineate al testo" che allinea il testo all'interno delle celle alla "sinistra" mentre lo impostiamo. Abbiamo anche impostato la sua "imbottitura" su "8px". Dopo questo, per cambiare il colore delle righe alternative, utilizziamo il selettore di stile CSS che diamo alla proprietà “: nth-child ()”. Pertanto, il colore delle file pari. La proprietà "Color sfondo" viene utilizzata qui per cambiare il colore della riga pari in "grigio chiaro" e il codice per questo colore è "#f2f2f2".

Premendo "Alt+B" all'interno del file HTML che abbiamo preparato in precedenza, l'output viene visualizzato sullo schermo. Le righe pari appaiono in un colore diverso, poiché applichiamo il selettore di stile alle righe pari della tabella.

Esempio n. 2:

In questo esempio, modifichiamo il colore delle righe dispari della tabella precedente che abbiamo costruito nel primo esempio. Non cambiamo la tabella; Cambiamo solo il colore della riga delle file dispari qui. La larghezza del tavolo è "100 percento."Quindi, abbiamo il" th "e" TD ". Abbiamo impostato il "allineamento del testo" su "a sinistra."Il testo all'interno delle celle del tavolo è posizionato sul lato sinistro della cella. L '"imbottitura" crea uno spazio tra il bordo della tabella e i dati che vengono digitati all'interno delle celle della tabella.

Quindi, questa "imbottitura" è impostata su "10px". Viene utilizzato per creare un buffer "10px" tra il contenuto della tabella e il bordo. Ora regoliamo il colore delle righe "dispari" del tavolo. Quindi, usiamo la proprietà "nth-child ()" qui. Il colore delle righe pari cambia se lo diamo alla proprietà ": nth-child ()". Qui, la proprietà "sfondo" viene utilizzata per cambiare il colore della riga pari in "grigio chiaro" usando il codice colore "#f2f2f2."

Puoi vedere che il colore delle righe dispari cambia in questo output perché il colore delle righe "dispari" alternative è cambiato. E il colore di sfondo solo delle file dispari diventa grigio.

Esempio #3:

Nel nostro terzo esempio, utilizziamo lo stesso selettore di stile CSS che abbiamo usato nei codici precedenti per modificare i colori delle righe sia pari e dispari. Tuttavia, utilizziamo una singola tabella e cambiamo il colore delle righe dispari. Qui, il colore del "bordo" è "nero". La larghezza del bordo è approssimativamente "2px". E il tipo di bordo realizzato è solido nella proprietà "bordo" di CSS.

Inoltre, il confine è "crollato", quindi appare come un singolo bordo. Il "100%" è selezionato come "larghezza". Quindi, abbiamo il "th" e "TD" e allinehiamo il suo testo al "centro" usando il "allineamento del testo". Usiamo l'imbottitura "6px" per questi. Ancora una volta, il bordo per l'intestazione e le celle è impostato su "2px" "larghezza", tipo "solido" e colore "nero". Il colore delle righe cambia quando utilizziamo il selettore di stile. Il selettore di stile viene applicato al numero "pari" di righe. All'inizio impostiamo il colore dello sfondo della riga per le righe pari al "giallo-verde". Vogliamo anche cambiare il colore delle righe "dispari", quindi usiamo di nuovo questo selettore di stile e questa volta mettiamo il "dispari" come parametro del selettore "nth-child ()" e impostiamo il suo "background- colore "a" verde chiaro ". Di conseguenza, il colore delle file dispari cambia in "verde chiaro".

Le righe alternative in questo output sono colorate in modo diverso. Le file pari sono giallo-verde, mentre le file dispari sono verdipie. Usando il selettore in stile CSS, è possibile modificare il colore delle righe alternative.

Esempio #4:

Questo è il nostro ultimo esempio e creeremo una nuova tabella contenente quattro colonne e sei righe. Ora, usiamo i due selettori qui in questo codice per modificare il colore della riga pari e il colore della riga dispari.

Qui, modelliamo un po 'la voce utilizzando la proprietà "allineate al testo" e impostandola sul "centro". Inoltre, abbiamo impostato il carattere "Font-Family" sul carattere "algerino". Il "colore" del carattere di questa intestazione è "rosso". Il carattere "Table" è impostato su "Arial" e anche il "collasso di confine" è impostato su "crollata" in questo esempio. La "larghezza" è impostata su "100px". Le proprietà usate qui per "Th" e "TD" sono le stesse degli esempi precedenti. Qui, il colore della riga "pari" è impostato su "verde chiaro" e il colore della riga "dispari" è impostato su "verde chiaro" utilizzando il selettore "nth-child ()".

L'output è reso di seguito e osserverai che anche le righe sono dello stesso colore e che le file dispari sono degli stessi colori. Questo è il risultato dell'utilizzo del selettore "nth-child ()" nel nostro codice CSS.

Conclusione

Questa guida ha dimostrato come modificare i colori della riga alternativa utilizzando il selettore CSS nth-child (). Abbiamo coperto come funziona con un numero dispari di righe e con un numero pari di righe. Abbiamo utilizzato la proprietà "color sfondo" che viene utilizzata per modificare il colore delle righe. Abbiamo utilizzato il selettore di nth-child () per applicare i diversi colori alle righe alternative in questa guida e abbiamo superato ogni codice in profondità. Abbiamo anche incluso il codice HTML e CSS e l'output. Di conseguenza, acquisisci molta conoscenza del concetto CSS di cambiare il colore delle righe alternative.