Le tableau des commandes — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 2)

Le tableau des commandes

Sélecteurs · niveau 2

Énoncé

La page ex5-tableau.html contient un tableau de commandes (un <thead> avec une ligne d'en-têtes, un <tbody> de quatre lignes commençant chacune par une cellule <th scope="row"> portant le numéro de commande). Sans ajouter aucune classe, écrire une feuille qui :

met la ligne d'en-têtes en blanc sur bleu nuit ;
teinte une ligne sur deux du corps, en commençant par la première ;
aligne les numéros de commande à gauche, en police à chasse fixe (valeur ui-monospace, monospace) ;
aligne les montants à droite ;
met en évidence la ligne survolée.

Corrigé


body {
  font-family: system-ui, sans-serif;
  color: #222;
  background-color: #faf8f5;
}

h1 {
  font-family: Georgia, serif;
  color: #1f3a68;
}

/* La ligne d'en-tête en bleu nuit */
thead th {
  color: white;
  background-color: #1f3a68;
}

/* Une ligne sur deux teintée */
tbody tr:nth-child(odd) {
  background-color: #f0ebe3;
}

/* Les numéros de commande à gauche, en police à chasse fixe */
tbody th {
  text-align: left;
  font-family: ui-monospace, monospace;
}

/* Les montants à droite */
td:last-child {
  text-align: right;
}

/* La ligne survolée */
tbody tr:hover {
  background-color: #fbe8d5;
}

La règle de survol vient après celle du zébrage : à égalité de spécificité, c'est elle qui l'emporte quand on survole une ligne teintée.