Come fare tabelle con colori alternati in CSS

Codice di esempio per creare tabelle con colori alternati in CSS/HTML

Nel codice che segue viene illustrato il metodo per la creazione di tabelle in HTML/CSS che presentino colori alterni sulle righe. Il metodo chiaramente è valido anche per la formattazione delle colonne.

Il cuore del procedimento è la creazione di una classe per la formattazione della tabella l’utilizzo dell’nth-child even o odd per targettare alternativamente le righe pari o dispari con stili diversi.

CSS

span { 
	font-family: Arial; 
	font-size:12px; 
	color:#444;
}

.tabella tr:nth-child(odd) td{
	background: #feffad;
}

.tabella tr:nth-child(even) td{
	background: #dbffc6;
}

 
HTML

<table cellpadding="3" cellspacing="3" class="tabella">
	<tr>
		<th><span>Nome</span></th>
		<th><span>Cognome</span></th>
		<th><span>Indirizzo</span></th>
		<th><span>Numero</span></th>
	</tr>
	<tr>
		<td><span>Mario</span></td>
		<td><span>Rossi</span></td>
		<td><span>via Roma 1</span></td>
		<td><span>02-1234567</span></td>
	</tr>
	<tr>
		<td><span>Paolo</span></td>
		<td><span>Bianchi</span></td>
		<td><span>via Milano 7</span></td>
		<td><span>02-1234567</span></td>
	</tr>
	<tr>
		<td><span>Mario</span></td>
		<td><span>Bianchi</span></td>
		<td><span>via Novara 26</span></td>
		<td><span>02-1234567</span></td>
	</tr>		
</table>