Добавим CSS. Уже намного лучше!
намного лучше | Угадайте, сколько кода разметки в этой таблице? 2,1 Кбайта! Здесь 4 строки и две колонки. Здесь нет ни одной прозрачной картинки! |
только так и надо | Все эти бордюры заданы правилами CSS. Это будет работать в любой ситуации. Точно такие же бордюры будут на бумаге если страницу напечатать.
|
Это всё сделано в восьми ячейках с помощью четырёх CSS инструкций. | Мы не шутим, 8 ячеек, 4 инструкции и больше ничего не надо.
|
Вам нужны правила для тегов <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 }