Comment alterner la couleur des lignes d'un tableau HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-09-30 19:02:15

Question

Comment puis-je alterner la couleur des lignes d'un tableau HTML ?

Réponse

Pour alterner la couleur des lignes d'un tableau HTML, vous pouvez utiliser la pseudo-classe CSS :nth-child avec la valeur even ou odd, selon que vous vouliez alterner les couleurs selon les lignes paires ou impaires du tableau HTML :

<!DOCTYPE html> 
<html>  
<head>
<title>Comment alterner la couleur des lignes d'un tableau HTML ?</title>  
<style>
tr:nth-child(even) { 
background-color: Lightgrey; 
} 
</style> 
</head> 
<body> 
<table> 
<tr>
<th>Nom</th> 
<th>Groupe</th> 
<th>Age</th> 
</tr>
<tr> 
<td>Nico</td> 
<td>1FORMATIK</td> 
<td>35</td> 
</tr>
<tr> 
<td>Antoine</td> 
<td>1FORMATIK</td> 
<td>42</td> 
</tr>
<tr> 
<td>Antoine</td> 
<td>1FORMATIK</td> 
<td>47</td> 
</tr>
<tr> 
<td>Pinkmary</td> 
<td>1FORMATIK</td> 
<td>32</td> 
</tr>
</table>
</body>
</html>

Vous trouverez d'avantage d'informations sur la manière d'alterner les couleurs des lignes d'un tableau via cette page du site de Mozilla.