Aller au contenu

Exercice 2 : Comparaison de produits

Objectif

Maîtriser la fusion de cellules dans les tableaux HTML (rowspan et colspan) et appliquer des styles CSS avancés (zebra stripes, mise en forme conditionnelle).

Workflow Git

Avant de commencer cet exercice :

1
2
3
4
5
git checkout main
git pull origin main
git checkout -b exercice-2
mkdir exercice-2
cd exercice-2

1. Créer le tableau HTML

  • Créez un fichier index.html dans le dossier exercice-2.
  • Comparer 4 ordinateurs portables avec les caractéristiques suivantes: Modèle, Processeur, RAM, Stockage, Prix, et Note globale.
  • Fusionner les cellules pour les caractéristiques qui sont les mêmes pour certains modèles (utiliser rowspan ou colspan).
  • Ajouter une cellule fusionnée pour le titre "Caractéristiques des Produits" qui s'étend sur toutes les colonnes.

2. Styliser le tableau avec CSS

  • Créez un fichier styles.css dans le dossier exercice-2.
  • Créer une bordure extérieure pour tout le tableau et des bordures fines pour chaque cellule.
  • Alterner la couleur des lignes pour faciliter la lecture (zebra stripes).
  • Ajouter une mise en forme conditionnelle pour les notes globales : utiliser des couleurs pour indiquer la qualité (vert pour les meilleures notes, rouge pour les pires).
  • Centrer le texte dans les cellules et ajuster la taille des colonnes.

3. Livraison de l'exercice

Checklist avant de soumettre

  • Fichiers : exercice-2/index.html et exercice-2/styles.css
  • 4 ordinateurs portables comparés
  • Cellules fusionnées (rowspan/colspan) utilisées
  • Zebra stripes implémentées
  • Mise en forme conditionnelle des notes (couleurs)
1
2
3
4
git add .
git commit -m "feat(exercice-2): tableau comparatif avec fusion cellules"
# git commit -m "style(exercice-2): zebra stripes et couleurs conditionnelles"
git push origin exercice-2

Création de la Pull Request

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Compare & pull request"
  3. Titre de la PR : feat(exercice-2): tableau comparatif de produits

  4. Remplissez la description de la PR :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    ## Exercice 2 : Comparaison de produits

### Ce qui a été réalisé

- [x] Création du fichier `exercice-2/index.html`
- [x] Création du fichier `exercice-2/styles.css`
- [x] Tableau HTML avec 4 ordinateurs portables
- [x] Colonnes : Modèle, Processeur, RAM, Stockage, Prix, Note globale
- [x] Cellule fusionnée pour le titre "Caractéristiques des Produits" (colspan)
- [x] Fusion de cellules pour caractéristiques identiques (rowspan/colspan)
- [x] Bordure extérieure et bordures fines pour cellules
- [x] Zebra stripes (alternance de couleurs des lignes)
- [x] Mise en forme conditionnelle des notes (vert/rouge)
- [x] Texte centré et colonnes ajustées

### Captures d'écran

#### Vue complète du tableau

![Tableau comparatif complet](URL_de_votre_capture)

#### Détail des cellules fusionnées

![Fusion de cellules](URL_de_votre_capture)

#### Mise en forme conditionnelle des notes

![Couleurs conditionnelles](URL_de_votre_capture)

### Points techniques

- HTML : `colspan`, `rowspan` pour la fusion de cellules
- CSS : `nth-child()` pour zebra stripes, classes pour couleurs conditionnelles
- Attention portée à la structure du tableau avec cellules fusionnées

### Questions pour l'enseignant

- (optionnel) Listez vos questions ici

  5. Ajoutez vos captures d'écran en glissant-déposant les images dans le champ de description

  6. Cliquez sur "Create pull request"
  7. N'oubliez pas : Ne cliquez PAS sur "Merge pull request" !

Captures d'écran à inclure dans votre PR

  • Vue complète du tableau avec les 4 produits
  • Zoom sur les cellules fusionnées
  • Détail de la mise en forme conditionnelle des notes