Yevy.FR Html, Css, Php, Infographie, Photographie

Pour rendre un tableau plus lisible il est fréquent d'alterner la couleur de fond des lignes, généralement c'est un script php ou JavaScript qui va insérer un attribut 'class'  différent à la balise tr, suivant s'il s'agit d'une ligne paire ou impaire (even ou odd en anglais)

Il existe un moyen d'alterner les couleurs d'un tableau sans avoir recours à un script, il est même possible de cibler facilement une ligne, ou un groupe de lignes, il s'agit des sélecteurs : nth-child , first-child, last-child etc...

Dans ce billet on va voir comment, uniquement avec du CSS, rendre les lignes paires sur fond gris, et les lignes impaires sur fond blanc, de plus les cellules auront une bordure verticale sauf sur les bords du tableau

Code CSS

#exemple1 {
width:50%;
}
#exemple1 tbody tr:nth-child(even) {
background-color:#CCCCCC;
}
#exemple1 tbody tr:nth-child(odd) {
color:#CC1100;
background-color:#FFFFFF
}
#exemple1 tbody td {
border-left:solid #777 1px;
padding:5px;
}
#exemple1 tbody td:first-child {
border-left:0px;
}

Explication

nth-child(even) cible les lignes paires alors que nth-child(odd) les lignes impaires
first-child cible la 1ere cellule (ici il est appliqué à la balise td) ce qui nous permet de supprimer la bordure gauche

Résultat

Compatibilité

nth-child

• IE9+
• Firefox 3.5+
• Chrome

first-child

• IE7+
• Firefox
• Chrome
• Safari
• Opera