La via migliore

molto meglio Indovina quanto markup c'è in questa piccola tabella? 2.1k. Ci sono 4 righe e 2 colonne in questa cosa. E nessun GIF spaziatore.
semplicemente corretto E tutti i bordi puntati sono fatti con CSS e sono correttamente validati.
  • Adesso questo è un oggetto lista
  • Semplicemente come dovrebbe
Tutto questo è fatto con 8 celle e 4 regole css. Davvero. 8 celle e 4 regole css, questo è tutto quello che serve.
  • Viva le liste puntate!
  • Perchè non marcare le vostre liste puntate come liste puntate e lasciare fare il resto ai CSS?
Avete bisogno di una regola per <table>, una per <td>, una per <ul> e una per <li>. È tutto. Una volta che avete quelli siete a posto.
  • Adoro le liste puntate
  • Eccellente! niente più punti finti

Ed ecco il Codice CSS usato per liberarci dell'inutile markup:

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 }