Bonjour Nashii et merci de ta patience.

Je te félicites pour l'exécution de ton test, ton tableau est très bien réussi et renvoie presque la
Bon, voyons voir ce code. Commençons, si tu le veux bien, par le côté HTML de la chose:

Premièrement, j'attire ton attention sur un aspect:

Code:

<td width="100" height="100" ><div class="casebleu"></div></td>

Pourquoi avoir placer une div dans chaque case du tableau ? N'aurait-il pas été plus simple de mettre la classe directement dans les cellules comme ceci ?

Code:

<td width="100" height="100" class="casebleu"></td>

C'est une question purement hypothétique, la réponse est oui . Ton code aurait été plus léger (à peine 196 octets), mais beaucoup plus facile à lire sans div inutiles.



Toujours au niveau du HTML, j'ai remarqué une balise inutile que tu as ajouté après chaque balise de rangée (< tr>).

Code:

<tr width="400" height="100" ></td>

Il s'agit bien de la balise < /td> qui sert à fermer une cellule, ici, elle ne sert à rien car aucune cellule n'a été ouverte. Un autre 20 octets de trop .


Un dernier point concernant le HTML:

Code:

<tr width="400" height="100" >

Définir les dimensions de la rangée n'est pas nécessaire, puisque tu as donné à chaque cellule sa dimension (100*100). Le code aurait été tout aussi fonctionnel en retirant de ces lignes:

Code:

width="400" height="100"

Un autre 78 octets de trop .

Observons tes classes CSS:

Code:

.caseXXXX{ background-color: XXXX; border: 1px solid black; border-collapse: collapse; min-width: 100px;min-height: 100px; margin: -2px;}

Critiquons maintenant:
margin: -2px: À quoi sert cette portion ? Les valeurs négatives ne sont prise en compte que par très peu navigateurs. Je me dois de te retirer un point.
min-width: 100px;min-height: 100px;: Fantastique, bravo ! , je n'y aurait pas pensé, vraiment. Comme tu as utilisé les div pour faire la couleur de ta cellule, tu as remarqué que si tu leur donnait une taille de 100*100 (width: 100px; height: 100px;)elle ne couvrait pas l'ensemble de la cellule, mais qu'en le faisant, les cellules doubles n'étaient pas entièrement couvertes. C'est bien ça ? Peu importe, ce coup de maitre te rapporte...

border-collapse: collapse; : Autre bonne idée, théoriquement, cette propriété aurait fusionné les bordures de tes cellules en une seule pour avoir des bordures en apparence de 1px, mais ça n'a pas marché. Cette propriété s'utilise dans un tableau, pas dans une cellule. ça aurait marché si tu avais appliqué la propriété pour l'ensemble du tableau en remplaçant ceci:

Code:

<table width="400" height="400">

par cela:

Code:

<table width="400" height="400" style="border-collapse: collapse;">

J'avais mis en place quelque chose de beaucoup plus compliqué pour avoir cet effet , donc, deux points bonis pour y avoir pensé, moins un pour avoir mal utilisé la propriété.
Et finalement, le fameux effet de survol, c'était si simple pourtant... il suffisait de d'ajouter nom de la classe + :hover à ton CSS, puis donner une autre couleur (ici jaune) avec background-color.

Comme ceci:

Code:

.caserouge:hover{ background-color: yellow;}

.casebleu:hover{ background-color: yellow;}

.casevide:hover{ background-color: yellow;}

Donc un exercice évalué à 15/20 ce qui nous amène à 13/20
Tes forces sont:
Connaissances des propriétés CSS.
Structure des tableaux.

Tu peux aller faire une réclamation de carte de codage ou demandé une évaluation supplémentaire si celle-ci ne te convient pas.

Cordialement,

Orange.