DIY SITE : HTML уроци за начинаещи

УРОК 13 : Таблици - 1 част

Много важни за оформлението на една уеб стрнаница са таблиците. В тях можете лесно и бързо да разположите всички HTML елементи и така да създадете една прилично изглеждаща страница.

Маркерът за указване на таблици е <table>...</table>. Таблиците се състоят от редове, които съдържат клетки. Редовете се указват с маркера <tr>...</tr> (от table row), който се записва между <table>...</table>. Клетките от своя стрaна се указват с маркера <td>...</td> (от table data), който се записва между <tr>...</tr>. Например :

-Ако искаме да създадеме таблица, съдържаща 1 ред и 3 клетки, трябва да въведем следното :

<table>

<tr>
<td>клетка1</td>
<td>клетка2</td>
<td>клетка3</td>
</tr>

</table>

Ще изглежда така :

клетка1

клетка2

клетка3

-Aко искаме да създадеме таблица, съдържаща 3 реда с по 2 клетки, трябва да въведем следното :

<table border="1">

<tr>
<td>клетка1</td>
<td>клетка2</td>
</tr>

<tr>
<td>клетка3</td>
<td>клетка4</td>
</tr>

<tr>
<td>клетка5</td>
<td>клетка6</td>
</tr>

</table>

Ще изглежда така :

клетка1	клетка2
клетка3	клетка4
клетка5	клетка6

В последния пример в маркера <table>...</table> е използван познатият ни вече атрибут border="стойност". Други атрибути, които могат да се вмъкнат в маркера <table>...</table> са :

bordercolor="цвят" - указва цвят на рамката;

frame="стойност" - указва спрямо стойността къде точно да има рамка. За да се използва атрибута frame трябва на border да е зададена стойност различна от 0. Възможните стойности на frame са :

lhs - оставя видима рамка само отляво.
rhs - оставя рамка само отдясно.
vsides - оставя рамка отляво и отдясно.
above - оставя рамка само отгоре.
below - оставя рамка само отдолу.
hsides - оставя рамка отгоре и отдолу.
void - премахва външните рамки на таблицата;
box - пуказва всички рамки (същия ефект е по подразбиране).

bgcolor="цвят" - указва цвят на фона на таблицата;

background="стойност" - указва изображение за фон на таблицата. Стойността може да бъде, както "името на изображението.разширение" така и целия URL до изображението.

align="стойност" - подравнява таблицата спрямо екрана. Стойностите, които може да заема са left , right и center.

width="стойност" - указва дължината на таблицата. Стойността може да бъде оказана в проценти от страницата или в пиксели;

height="стойност" - указва височината на таблицата.

cellpadding="стойност" - указва разстояние между. съдържанието на клетката и стените й. Стойността може да бъде оказана в проценти от клетката или в пиксели. За да ви стане по-ясно, погледнете примера:

cellspacing="стойност" - указва разстояние между клетките. Стойността може да бъде оказана в проценти от клетките или в пиксели. За да ви стане по-ясно, погледнете примера: