tete du loic

 Loïc YON [KIUX]

  • Enseignant-chercheur
  • Référent Formation Continue et alternance ingénieur
  • Responsable de la filière F2 ingénieur
  • Secouriste Sauveteur du Travail
mail
loic.yon@isima.fr
phone
(+33 / 0) 4 73 40 50 42
location_on
Institut d'informatique ISIMA
  • twitter
  • linkedin
  • viadeo

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é :

Voici d'autres modifications plutot CSS3 :

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