[Release] Всичко за таблицата

sNG

New Member
Joined
Sep 11, 2008
Messages
2,646
Reaction score
690
HTML таблиците се формират благодарение на няколко тага – table,tr,td и td.Всяка таблица започва с тага table после с tr и накрая с td и завършва със затварящите им тагове.

Всичко за една таблица:

Първа стъпка:
Създаване на проста таблица:

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)
 
  • Like
Reactions: xmaniacbg