Копнём поглубже
![]() | |||||||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | |||||
![]() | Это можно было сделать намного проще | ![]() | ![]() | Угадайте, сколько разметочного кода в этой небольшой таблице? 13,7 Кбайт! В ней 17 строк и 9 колонок. Я не говорю о том сколько тут прозрачных картинок! | ![]() | ||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ||||||||
![]() | |||||||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | |||||
![]() | Здесь непростительно много ячеек и прозрачных картинок. | ![]() | ![]() | Кроме того, точечные разделители ячеек выложены с использованием аттрибута background , который не везде действителен
| ![]() | ||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ||||||||
![]() | |||||||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | |||||
![]() | Точно такую же картину можно получить используя всего 8 ячеек и 4 CSS инструкции! | ![]() | ![]() | Серьёзно говорю, всего 8 ячеек и 4 инструкции вместо этого мусора.
| ![]() | ||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ||||||||
![]() | |||||||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | |||||
![]() | Нужна одна инструкция для <table>, одна для <td>, ещё одна для <ul> и последняя для <li> | ![]() | ![]() | И это всё! Один раз написать этого хватит чтоб оформить так-же все остальные таблицы!
| ![]() | ||||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ||||||||
![]() |
The code that shows the table structure:
table{ margin:3px; padding:2px; border:solid 2px blue }
td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }