Jetons un œil sous le capot

Le même résultat pourrait être atteint beaucoup plus simplement. Devinez quelle est la quantité de code pour ce petit tableau ? 13.7k. Il y a 17 rangées et 9 colonnes dans ce truc. Et c'est sans compter tous ces gifs transparents !
Il y a beaucoup trop de cellules de tableaux et d'images transparentes ici. Et toutes les bordures en pointillés sont réalisées avec un attribut de background sur les cellules de tableaux, ce qui n'est pas conforme.
• Un tableau imbriqué ? Quel intérêt ?
• Pour créer une liste à puces ? Vous rigolez ?
La même chose pourrait être accomplie avec 8 cellules de tableaux et 4 règles CSS. Sérieusement. 8 cellules de tableaux et 4 règles CSS. C'est tout ce dont on a besoin.
• Oh non, un autre tableau qui se donne des airs de liste à puces !
• Suffit de baliser vos listes à puces comme des listes et de laisser les CSS faire le reste.
Vous avez besoin d'une règle pour <table>, une pour <td>, une pour <ul> et une pour <li>. C'est tout. Avec ça vous serez le roi.
• C'est mieux que d'utiliser 8 autres cellules de tableaux pour simuler une liste à puces, ce qui est beaucoup moins accessible.
• Excellent! La dernière fausse puce.

Le code qui présente la structure du tableau :

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }