CSS / Table

Date de première publication : 2019/04/09

<table>
<tr><td>Nom</td><td>Prénom</td><td>Langage</td><td>Année</td></tr>  
<tr><td>Backus</td><td>John</td><td>FORTRAN</td><td>1957</td></tr>
<tr><td>Goldfarb</td><td>Charles</td><td>GML</td><td>1969</td></tr>
<tr><td>Wirth</td><td>Niklaus</td><td>Pascal</td><td>1970</td></tr>
<tr><td>Ritchie</td><td>Dennis</td><td>C</td><td>1972</td></tr>
<tr><td>Stroustrup</td><td>Bjarne</td><td>C++</td><td>1983</td></tr>
<tr><td>Berners Lee</td><td>Tim</td><td>WWW</td><td>1990~</td></tr>
<tr><td>Gosling</td><td>James</td><td>Java</td><td>1993</td></tr>
<tr><td>Lerdorf</td><td>Rasmus</td><td>PHP</td><td>1994</td></tr>
<tr><td>Eich</td><td>Brendan</td><td>Javascript</td><td>1995</td></tr>
</table>

Modifier la table avec du CSS pour obtenir le résultat souhaité :

Première ligne avec un fond bleu foncé et une écriture blanche
Centrer la table

Voici d'autres modifications plutot CSS3 :

Ligne de données avec un fond bleu clair, une ligne sur deux
Mettre un fond violet sur la colonne des langages

On peut toujours obtenir le résultat avec class. C'est fastidieux mais efficace !

La solution la plus "simple" consiste à utiliser le pseudo-élément :nth-child

element:nth-child(2)
element:nth-child(2n+3)
element:nth-child(even)  // ou odd :-)

Quelle est la différence entre les deux sélecteurs suivant ?

element:nth-child(2)
tr:first-child
tr :first-child