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