|
Създаване на нов ред и нова клетка в таблица. Задаване на рамка на таблица,
на широчина и височина на таблица и отделниrе й клетки. Подравняване на таблица.
Езикът НТМL - дава възможност за дефиниране на таблици. Дефиниране на таблица става с двойката етикети и . Редове в таблицата се задават с етикетите и (ТаЫе row - ред в таблица). За да зададете текст във всяка отделна клетка (cell) на таблицата трябва да използвате двойката етикети и
Да дефинираме таблица с три реда и една колона.
Web страница с таблица
Toвa е първи ред от таблицата. |
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Този пример сигурно не ви е направил впечатление да е оформен като таблица при визуализацията му в браузъра. Web-страницата в браузъра изглежда по-скоро като 3 параграфа, записани на отделни редове. Само текстът подсказва, че това са редове в таблица.
Това е така, защото рамката на таблицата е невидима. За да визуализираме рамката на таблицата, трябва да използваме атрибута BORDER на етикета . Стойността на атрибута се задава в пиксели. По подразбиране BORDER=0, което означава, че няма видима рамка.
Wеb страница с таблица
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Таблицата вече има рамка и очертани редове. В HTML - документите рамката на таблицата се изобразява със сянка, което я прави да изглежда тримерна.
А сега експериментирайте с различни стойности на атрибута BORDER=1,3,7,15,25. Изберете тази стойност, с която таблицата изглежда най-добре за вас!
Добре би било да подравним таблицата спрямо прозореца и да я центрираме. По подразбиране таблицата се подравнява към левия край на прозореца. Атрибутът за подравняване е ALIGN и стойностите му са: left, center и right. Предполагам си спомняте, че този атрибут със същите стойности вече сте го срещалн в етикета за нов параграф
(урок 2).
. Таблицата се подравнява към левия край на страницата. Това е стойността по подразбиране.
. Таблицата се центрира хоризонтално.
<ТAВLE ALIGN=right. Таблицата се подравнява към десния край на прозореца.
Да направим таблицата центрирана.
Wеb страница с таблица
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
А сега да я направим подравнена вдясно.
Wеb страница с таблица
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Можем да променяме размера на таблицата в ширина. Това става с атрибута WIDTH на етикета . Стойностите на атринбута WIDTH могат да се задават както относитено - в проценти спрямо ширината на страницата, така и абсолютно - в пиксели.
В долния HTМL документ таблицата е широка колкото ширината на целия прозорец (100%).
Wеb страница с таблица
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Сега да зададем размер на таблицата равен на половината от ширината на прозореца (50%). Освен това да центрираме таблицата.
Wеb страница с таблица
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Да сравним ширина 50% с ширина 50 пиксела. За тази цел, нека в един и същ HTML документ направим две таблици. Първата да бъде с ширина 50%, а втората - с ширина 50 пиксела. Това можете да направите много лесно като копирате частта от горния пример, която дефинира таблица (от отварящия етикет до затварящия - и промените 50% на 50 в атрибута WIDTH.
Wеb страница с таблица
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Използването на коментари в горния пример е с цел да се отдели първата от втората таблица.
От начина на визуализация на втората таблицa във web-страницата се вижда, че ако ширината на колона в таблиaта е недостатъчна, за да се изпише текста на един ред, то той се разполага на толкова редове, колкото е необходимо. Ако ширината на колоната е по-малка, отколкото най-дългата дума в текста, браузърът автоматично я разширява до тази подходяща ширина, при която не се налага пренос на думата. Задайте ширина 1 пиксел на колона в таблицaта и вижте какъв ще е резултатът от визуализацията й в браузъра. А сега експериментирайте с различни размери в пиксели - 100,200,300 и в проценти – 100%, 25%, 75%.
Освен широчината, можете да променяте и височината на таблицaта чрез атрибута НЕIGНТ на етикета . Стойността на този атрибут, също както на атрибута за ширина, се задават в проценти (спрямо височината на прозореца) или в пиксели.
Wеb страница с таблица
Toвa е първи ред от таблицата.
Това е втори ред от таблицата.
Това е трети ред от таблицата.
Експериментирайте с различни стойности на атрибутите за ширина и височина.
