Погледнете под повърхността
 |
 |  |  |  |  |  |  |  |  |
 | Всъщност, това би могло да се направи много по-просто. |  |  | Познайте колко код е нужен за тази малка табличка? 13.7k. Има 17 реда и 9 колони в това чудо. А споменахме ли всички spacer.gif-ове? |  |
 |  |  |  |  |  |
 |
 |  |  |  |  |  |  |  |  |
 | Има прекалено много клетки и spacer.gif-ове. |  |  | И всички пунктирани контури са направени с атрибута background на всяка клетка поотделно, което, освен това, няма и да се валидира. |  | • | Вложена таблица? Но защо? |  |  | • | За да направим неподреден списък? Майтапиш се, нали? |
|  |
 |  |  |  |  |  |
 |
 |  |  |  |  |  |  |  |  |
 | Това цялото може да бъде направено само с 8 клетки и 4 CSS правила. |  |  | Сериозно. 8 клетки и 4 CSS правила, това е всичко. |  | • | О, не, още една таблица, която симулира неподреден списък. |  |  | • | Просто опишете вашите списъци в кода като списъци и оставете CSS да свърши останалото. |
|  |
 |  |  |  |  |  |
 |
 |  |  |  |  |  |  |  |  |
 | Имате нужда от CSS правило за <table>, <td>, <ul> и <li>. |  |  | Това е. Имате ли тези правила - всичко е наред. |  | • | И така е много по-добре, отколкото да използваме още 8 клетки, за да наподобим един неподреден списък, който, в крайна сметка, става и много по-недостъпен. |  |  | • | Прекрасно! Последният фалшив лист. |
|  |
 |  |  |  | |  |
 |
Кодът, който показва структурата на таблицата:
table{ margin:3px; padding:2px; border:solid 2px blue }
td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }