Voilà qui est mieux !

beaucoup mieux Devinez combien de code il y a dans ce petit tableau ? 2.1k. Il n'y a que 4 rangées et 2 colonnes dans ce truc. Et aucune image transparente.
juste parfait Et toutes ces bordures pointillées sont réalisées par CSS et sont parfaitement conformes.
  • Voici une liste d'items
  • Exactement comme cela devrait être
Tout ceci est rendu possible avec 8 cellules et 4 règles CSS. Sérieusement. 8 cellules de tableaux et 4 règles CSS. C'est tout ce dont on a besoin.
  • Une main d'applaudissement pour les listes à puces
  • Pourquoi ne pas simplement avoir recours aux listes à puces pour coder des listes à puces et laisser à CSS le soin de s'occuper du 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 êtes équipés.
  • J'adore les listes à puces
  • Excellent! Finies les fausses listes

Et voici les règles CSS pour se débarasser de tout ce code excédentaire :

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }