Colorer les lignes paires d’un tableau en CSS

Il est souvent très utile de colorer de façon alternée les lignes d’un tableau, ne serait-ce que pour s’y retrouvé ou simplement parce que c’est plus jolie. Sachez qu’il est très simple de le faire en CSS à l’aide des sélecteurs.

Prenons tout d’abord un tableau de base, avec comme code html :

<table>
<tr>
     <td>Ligne1 Colonne1</td>
     <td>Ligne1 Colonne2</td>
     <td>Ligne1 Colonne3</td>
</tr>
<tr>
     <td>Ligne2 Colonne1</td>
     <td>Ligne2 Colonne2</td>
     <td>Ligne2 Colonne3</td>
</tr>
<tr>
     <td>Ligne3 Colonne1</td>
     <td>Ligne3 Colonne2</td>
     <td>Ligne3 Colonne3</td>
</tr>
<tr>
     <td>Ligne4 Colonne1</td>
     <td>Ligne4 Colonne2</td>
     <td>Ligne4 Colonne3</td>
</tr>
<tr>
     <td>Ligne5 Colonne1</td>
     <td>Ligne5 Colonne2</td>
     <td>Ligne5 Colonne3</td>
</tr>
</table>

et comme code CSS :

table
{
     border-collapse: collapse;
}
 
td, tr
{
     border: 1px solid #276145;
     padding:5px;
}

On obtient donc ce tableau tout à fait classique :

Si maintenant on ajouter ce code CSS :

tr:nth-child(2n+1)
{
     background-color : #CCC;
}

On obtiendra alors le tableau suivant :

Vous remarquerez que les lignes paires ont maintenant un fond gris.

Pour faire cela j’ai utilisé le sélecteur nth-child(an+b). Ce sélecteur applique donc des propriétés CSS dans notre cas seulement toutes les « a » lignes en commençant par la numéro « b » (ici toutes les 2 lignes en commençant par la 1ère).

Si vous souhaitez colorer une ligne sur 3 il vous faudra donc utiliser : "nth-child(3n+1)".

Si vous souhaitez non plus commencer par la première, mais par la deuxième ligne il faudra utiliser : "nth-child(2n+2)".

Il faut savoir aussi que ce sélecteur n’est pas uniquement utilisable pour les tableaux, vous pouvez très bien l’utiliser pour sélectionner un <h1> sur deux … (avec h1:nth-child(2n+1)).