В този урок нека да разгледаме
как се създават таблици
и как се стилизират те.
Тук имам html,
който съм създал от шаблона.
С вързан към него "style.
css",
който в момента е празен.
Нека да го отворим
в "Google Chrome".
След това да го прехвърлим в "Stylizer".
Сега ще започна моята таблица с този таг.
"Table".
Като директно го затворя, за да забравя.
Искам да създам един ред в моята таблица.
След което искам да създам
една клетка в моята таблица.
"TR" е за ред.
"TD" е за клетка.
Ще направя 5 клетки в този ред.
След което
ще видим какво става.
ще видим, какво става.
Всъщност така ще го намаля, за да се вижда отгоре.
Създавам нов ред.
Този път ще е 6, 7, 8, 9 и 10.
Този път ще е 4 6 7 8 9 10.
Давам "Save".
Вижте какво се получи отгоре.
В момента таблицата много не се вижда.
Затова ще избера един от тези елементи
виждате какъв му е пътя.
Ще натисна на "TD"
и създай правило.
Създавам граница.
Веднага след като го създам
ще го разширя
и тук ще сложа един пиксел.
В стил, мога да избера
един от тези, примерно "Solid".
"Outset".
"Dotted" с точици.
"Dashed" с тирета.
В повечето случаи се използва "Solid".
Тук му избирам цвят.
Този "border" стил
работи върху всякакъв вид елементи,
не само върху таблици.
Сега искам да направя още няколко реда.
Вижте, какво се получи.
Нека да сложим малко "padding",
Нека да сложим малко
за да се вижда по-добре.
Ще хвана цялата таблица
ще създам правило за таблица.
Ще и дам "maring"
и "auto", за да се центрира.
След, което ще преместя и отгоре.
Това което можем да правим с тази таблица
е да събираме клетки.
Хоризонтално и вертикално.
Например искам да събера 9 и 10.
Отивам където са те, изтривам 10.
И тук пиша
"Colspan" равно на 2.
Понеже вече заема мястото на две клетки.
Вижте сега съдържанието
може да се разпростира и на двете клетки.
Ако искам да го направя това вертикално.
Ще избера например 6,
11 и 16.
Ще отида в 6, ще дам "Rowspan".
Равно на три, понеже искам три клетки да събера.
След което ще отида на 11 и 16 и ще ги изтрия.
След което ще отида на 11 и 16 и ще ги изтрия.
Виждате какво се получи.
Другото нещо, което мога да правя
с тези клетки в "style.
css".
Е да дам "vertical-align".
Като отдолу си избера например
искам да се приравняват "bottom".
Виждате, къде се премести 6.
Или "top".
По подразбиране са "middle".
Другото нещо, което искам да направя
е първият ми ред да е описателен.
Затова ще се кача тук
и ще напиша "THEAD".
Като отворя тага и го затворя, когато реда свърши.
Така създавам
заглавна част на тази таблица.
Погледнете какво става тук,
когато натисна "Space".
"Table - THEAD - TR - TD",
когато отида на нормален елемент
ще напиша "Table - TBODY" този път,
а не "THEAD",
"TR" и "TD".
По този начин мога да направя едно правило.
Например, "THEAD - TD", което да има фон
например някакъв цвят.
Това което принципно много дразни в тези таблици
са тези граници.
Но няма проблеми те може да се оправят.
Когато отида в "Table"
мога да задам едно правило.
"Border"
Трябва да съм вътре.
Тук да натисна "Enter".
"Border-collapse".
Сега от тук избирам различните опции "collapse".
"inherit" тоест,
както е по подразбиране.
или "separate".
Което е това.
Избирам "collapse".
Сега вече таблицата ми
изглежда доста по-добре.
Принципно преди седем-осем години
самите страници се създаваха като таблици.
Вместо начина, който ви показах с "DIL" и "Flow".
Те се правиха с такива таблици.
Но тези таблици много бавно се рендерват
от самия браузър.
Много бавно излизат на екрана.
Плюс това, когато се променят динамично с "JavaScript"
ефектите стават накъсани.
От друга страна
и възможността за ефекти
е доста по-лоша.
Имате намалена възможност за стилизиране, така че
не правете самите си дизайн оформления
на страницата от таблиците.
Те се използват основно за
части от съдържанието например ценови листи.
