Uno sguardo in profondità

Questo potrebbe davvero essere fatto molto più semplicemente. Indovina quanto markup c'è in questa piccola tabella? 13.7k. Ci sono 17 righe e 9 colonne in questa cosa. Senza menzionare tutti i GIFs spaziatori...
Ci sono troppe celle e spaziatori qui. E tutti i bordi coi puntini sono ottenuti con l'attributo background sulle celle, che non sarà validato.
• Una tabella annidata? Per cosa?
• Per fare le liste a punti? State scherzando, vero?
Tutto questo potrebbe essere fatto con 8 celle e 4 regole CSS. Seriamente. 8 celle e 4 regole css, questo è tutto quello che serve.
• Oh no, un altra tabella che si maschera da lista puntata.
• Marcate solo le vostre liste puntate come liste puntate e lasciate fare il resto ai CSS.
Avete bisogno di una regola per <table>, una per <td>, una per <ul> e una per <li>. E' tutto. Una volta che avete quelli siete a posto.
• È meglio che usare 8 celle in più per fare una lista puntata finta, che finisce per essere molto meno accessibile.
• Eccellente! L'ultimo punto.

Il codice che mostra la struttura della tabella:

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

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