Уже намного лучше

намного лучше Угадайте, сколько кода разметки в этой таблице? 2,1 Кбайта! Здесь 4 строки и две колонки. Здесь нет ни одной прозрачной картинки!
только так и надо Все эти бордюры заданы правилами CSS. Это будет работать в любой ситуации. Точно такие же бордюры будут на бумаге если страницу напечатать.
  • Теперь это элементы списка
  • Какими они и были задуманы
Это всё сделано в восьми ячейках с помощью четырёх CSS инструкций. Мы не шутим, 8 ячеек, 4 инструкции и больше ничего не надо.
  • Маркированые списки выглядят отлично
  • Почему люди не делают их так просто и не оставляют оформление на долю CSS?
Вам нужны правила для тегов <table>, <td>, <ul> и <li>. И всё. Любую таблицу можно будет оформить так-же не задумываясь.
  • Мы любим нормальные маркированные списки!
  • Отлично! Больше нет здесь фальшивых строк!

Ну и наконец, CSS код с инструкциями, делающими всё необходимое для разметки:

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 }