Formater des tableaux en CSS : Exercice n°3

Pascal FurlanCSS

Exercice n°3 pour intégrer du CSS dans des tableaux : l’utilisation du sélecteur « :nth-of-type »

Le sélecteur :nth-of-type (“n-ième du type”) permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que l’on détermine. Cette “pseudo-classes structurelles” est utilisée pour appliquer un style au contenu en fonction de ses relations avec les éléments parents et enfants.

L’exercice n°3 va permettre de mettre en pratique le sélecteur :nth-of-type, avec le tableau ci-dessous à reproduire :

Le HEAD  et les styles CSS de la page HTML :

<!DOCTYPE html>
<html lang= « fr »>
<head>
<meta charset= « utf-8 »>
<title>Windows NT</title>
<style>
body {
font-family: sans-serif;
}#wnt {
width: 100%;
border-spacing: 0;
border: none;
}

#wnt td {
padding: .2em .5em;
text-align: center;
}

#wnt tr:nth-of-type(1) :nth-child(1) {
color: #ff0;
background-color: #c03;
}

#wnt tr:nth-of-type(2) :nth-of-type(1) {
background-color: #cc9;
}

#wnt tr:nth-of-type(2) :nth-of-type(2) {
background-color: #f93;
}

#wnt tr:nth-of-type(2) :nth-of-type(3),
#wnt tr:nth-of-type(2) :nth-of-type(5),
#wnt tr:nth-of-type(2) :nth-of-type(7) {
background-color: #fff;
}

#wnt tr:nth-of-type(2) :nth-of-type(4),
#wnt tr:nth-of-type(2) :nth-of-type(6) {
background-color: #fc6;
}

#wnt tr:nth-of-type(3) :nth-of-type(1),
#wnt tr:nth-of-type(4) :nth-of-type(2) {
background-color: #69c;
}

#wnt tr:nth-of-type(4) :nth-of-type(1) {
background-color: #fc9;
}

#wnt tr:nth-of-type(3) :nth-of-type(2) {
background-color: #66f;
}

#wnt tr:nth-of-type(5) :nth-child(1) {
 background-color: #ccc;
}

</style>
</head>

Le BODY de la page HTML en détail :

<body>
<h1>Windows NT</h1>
<table id= « wnt »>
<caption>Architecture de Windows NT</caption>
<tr>
<td colspan= « 7 »>Services système</td>
</tr>
<tr>
<td rowspan= « 3 »>Gestionnaire d’E/S</td>
<td>Gestionnaire d’objets</td>
<td>Moniteur de références de sécurité</td>
<td>Gestionnaire de processus</td>
<td>Gestionnaire de mémoire virtuelle</td>
<td>Appel de procédures locales</td>
<td>Gestionnaire de fenêtres</td>
</tr>
<tr>
<td colspan= « 5 »>Micro-noyau</td>
<td rowspan= « 2 »>GDI</td>
</tr>
<tr>
<td colspan= « 4 »>Couche d’abstraction matérielle</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan= « 7 »>Matériel</td>
</tr>
</table>
</body>
</html>