Tабличните тагове

CSS и HTML » HTML

kz00rts   трудност:    видян: 2053

HTML таблиците се формират благодарение на няколко тага – table,tr,td и th.Всяка таблица започва с тага table после с tr и накрая с td и завършва със затварящите им тагове.Ето един пример за таблица.


<table>
<tr>
<td>число 1</td>
<td>число 2</td>
<td>число 3</td>
</tr>
<tr>
<td>число 4</td>
<td>число 5</td>
<td>число 6</td>
</tr>
<tr>
<td>число 7</td>
<td>число 8</td>
<td>число 9</td>
</tr>
</table>




Очертаване на рамки около таблици

Това става с атрибута 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 – задава да няма никакви рамки в таблицата

Използване на таблици за структурно оформление на страници

Таблиците са най-лесния начин да структурирате вашата страница,разбира се може да ви се наложи да не ползвате само една таблица а по няколко.Важното е когато правите своя страница първо да нахвърляте идеята си на лист хартия след това да я изработите таблично с помощта на таблиците и накрая да я разкрасите и да получите желания резултат.

Надявам се урокът да ви хареса!