HTML таблиците се формират благодарение на няколко тага – table,tr,td и td.Всяка таблица започва с тага table после с tr и накрая с td и завършва със затварящите им тагове.
Всичко за една таблица:
Първа стъпка:
Създаване на проста таблица:
Вмъква се м/у <body> </body>
Ето вече как става \"разкрасяването\" на таблицата:
Очертаване на рамки около таблици:
Това става с атрибута border в тага table.Задавате стойност на border като числа – 1,2,3,4,5,6 и т.н като ако използвате нула (0) това ще значи,че не няма да има рамка.
Озаглавяване на таблиците:
Както споменах по-горе има и таг th които служи за създаване на заглавие и буквите в него са с удебелен шрифт.
Сливане на клетки:
Има в атрибута,които вършат цялата работа colspan и rowspan
Rowspan – вертикално сливане на клетки
Colspan – хоризонтално сливане на клетки
Задаване размер на таблиците:
По-лесно от това няма прави се с познатите ви до болка атрибути width и height.От урока за начинаещи ниво 0 би трябвало да сте наясно с това как се използват тези атрибути.
Навлизане в дълбочината на форматиране на таблици
Подравняване на таблиците:
Това става с два атрибута и техните под-атрибути
Align – премества съдържанието от ляво,дясно и по средата съответно – align=”left”;Align=”right”;Align=”center”
Valign – премества съдържанието от горе от долу и по средата съответно – valign=”top”;Valign=”bottom”;Valign=”middle”
Даване на пространство около таблицата:
Пространствата за отделните клетки на таблицата се правят с атрибутите cellspacing и cellpading на тага table.
Cellspacing – добавя пространство между клетките в таблицата без да променя размера на таблиците.
Cellpadding – добавя пространство вътре в самата клетка и нейните стени.
И двата атрибута задават пространството в пиксели!
Украсяване на таблици с цветове и изображения:
Тук имате два избора да ползвате
Bgcolor – чрез,които може да слагате цвят в клетките или в цялата таблица bgcolor=”e7e7e7”
Background – може да слагате изображение в клетките или в цялата таблица
Background=”picture1.jpg”
Да кажем още нещо за рамките:
Има още един атрибут за тага table които ви позволява да донастроите показването на рамката и частите от таблицата.Това е атрибута frame,които може да бъде зададен със следните стойности:
Above – рамка отгоре на таблицата
Below – рамка отдолу на таблицата
Hsides – рамка отгоре и отдолу на таблицата
Lhs – рамка от лявата страна на таблицата
Rhs – рамка от дясната страна на таблицата
Vsides – рамка от лявата и дясната страна на таблицата
Box – рамка от всички страни на таблицата
Border – рамка от всички страни на таблицата като при box
Void – задава да няма никакви рамки в таблицата
Използване на таблици за структурно оформление на страници:
Таблиците са най-лесния начин да структурирате вашата страница,разбира се може да ви се наложи да не ползвате само една таблица а по няколко.Важното е когато правите своя страница първо да нахвърляте идеята си на лист хартия след това да я изработите таблично с помощта на таблиците и накрая да я разкрасите и да получите желания резултат.
TESTED!
Credits: Uroci.net & jijiji (for edit)
Всичко за една таблица:
Първа стъпка:
Създаване на проста таблица:
HTML:
<table>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>Вмъква се м/у <body> </body>
Ето вече как става \"разкрасяването\" на таблицата:
Очертаване на рамки около таблици:
Това става с атрибута border в тага table.Задавате стойност на border като числа – 1,2,3,4,5,6 и т.н като ако използвате нула (0) това ще значи,че не няма да има рамка.
Озаглавяване на таблиците:
Както споменах по-горе има и таг th които служи за създаване на заглавие и буквите в него са с удебелен шрифт.
Сливане на клетки:
Има в атрибута,които вършат цялата работа colspan и rowspan
Rowspan – вертикално сливане на клетки
Colspan – хоризонтално сливане на клетки
Задаване размер на таблиците:
По-лесно от това няма прави се с познатите ви до болка атрибути width и height.От урока за начинаещи ниво 0 би трябвало да сте наясно с това как се използват тези атрибути.
Навлизане в дълбочината на форматиране на таблици
Подравняване на таблиците:
Това става с два атрибута и техните под-атрибути
Align – премества съдържанието от ляво,дясно и по средата съответно – align=”left”;Align=”right”;Align=”center”
Valign – премества съдържанието от горе от долу и по средата съответно – valign=”top”;Valign=”bottom”;Valign=”middle”
Даване на пространство около таблицата:
Пространствата за отделните клетки на таблицата се правят с атрибутите cellspacing и cellpading на тага table.
Cellspacing – добавя пространство между клетките в таблицата без да променя размера на таблиците.
Cellpadding – добавя пространство вътре в самата клетка и нейните стени.
И двата атрибута задават пространството в пиксели!
Украсяване на таблици с цветове и изображения:
Тук имате два избора да ползвате
Bgcolor – чрез,които може да слагате цвят в клетките или в цялата таблица bgcolor=”e7e7e7”
Background – може да слагате изображение в клетките или в цялата таблица
Background=”picture1.jpg”
Да кажем още нещо за рамките:
Има още един атрибут за тага table които ви позволява да донастроите показването на рамката и частите от таблицата.Това е атрибута frame,които може да бъде зададен със следните стойности:
Above – рамка отгоре на таблицата
Below – рамка отдолу на таблицата
Hsides – рамка отгоре и отдолу на таблицата
Lhs – рамка от лявата страна на таблицата
Rhs – рамка от дясната страна на таблицата
Vsides – рамка от лявата и дясната страна на таблицата
Box – рамка от всички страни на таблицата
Border – рамка от всички страни на таблицата като при box
Void – задава да няма никакви рамки в таблицата
Използване на таблици за структурно оформление на страници:
Таблиците са най-лесния начин да структурирате вашата страница,разбира се може да ви се наложи да не ползвате само една таблица а по няколко.Важното е когато правите своя страница първо да нахвърляте идеята си на лист хартия след това да я изработите таблично с помощта на таблиците и накрая да я разкрасите и да получите желания резултат.
TESTED!
Credits: Uroci.net & jijiji (for edit)
