Погледнете под повърхността
|
| | | | | | | | |
| Всъщност, това би могло да се направи много по-просто. | | | Познайте колко код е нужен за тази малка табличка? 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 }