Come creare alternata colori di sfondo nelle righe della tabella con i CSS

March 19

In tavoli più grandi è spesso un aiuto alla lettura di avere alternati colori di sfondo per ogni riga della tabella. Può aiutare i lettori a seguire le linee dall'altra parte del tavolo. E 'facile da implementare con i CSS. Ecco come.

istruzione

1 Come creare alternata colori di sfondo nelle righe della tabella con i CSS

Ecco una semplice tabella con alternanza di righe grigie e bianche. Questa tecnica funziona per qualsiasi combinazione di colori o di qualsiasi tabella dimensione.

2 Costruire il tavolo utilizzando le normali strumenti di tabella-building HTML.

3 Nel foglio di stile, creare una classe che può essere applicato ad elementi TR (riga della tabella) alternati. Ecco un esempio:
.rowcolor {

background: #CCCCCC;

}

4 Come creare alternata colori di sfondo nelle righe della tabella con i CSS

In HTML, aggiungere la classe di righe alternate nella tabella. Applicare all'elemento TR. Vedi immagine per esempio.

5 Se si desidera avere un colore diverso per la riga della tabella che contiene le intestazioni, è possibile creare una nuova classe o regola id nel foglio di stile che si applicherà solo un colore di sfondo agli elementi TH.

Consigli e avvertenze

  • La tabella nella foto sopra sta usando il "border-collapse: crollo" regola per rimuovere lo spazio vuoto tra i bordi della tabella.