УРОК 5: Таблици

  1. Таблиците и HTML.
  2. Елемент TABLE.
  3. Елемент CAPTION.
  4. Елемент TR (Table Row).
  5. Елементи TH (Table Header) и TD (Table Data).
  6. Примери.

1. Таблиците и HTML.

Таблиците, освен за представяне на данни в табличен вид, се използват и за подреждане на информацията - текст или изображения.
Go to Top


2. Елемент TABLE.

\..........Описание

Елементът TABLE създава таблица. Съдържа елементите CAPTION, TR, TH и TD.

\..........Синтаксис

<TABLE
     ALIGN="left"|"center|"right"
     BGCOLOR="цвят"
     BORDER="число"
     CELLPADDING="число"
     CELLSPACING="число"
     HEIGHT="височина"
     WIDTH="ширина">
.....
</TABLE>

\..........Атрибути

Атрибут Описание
ALIGN= "left"
"center"
"right"
Задава хоризонталното разположение на таблицата.

left - ляво подравняване. Използва се по подразбиране;

center - центриране.

right - дясно подравняване;
BGCOLOR="цвят" Задава цвета на клетките на таблицата. Цвета на отделни клетки може да се различава от основния цвят на таблицата, ако се използва атрибута BGCOLOR на елементите TR, TH и TD.
BORDER="число" Задава дебелината на рамката на таблицата в пиксели. Ако се зададе BORDER=0 или не се зададе изобщо, таблицата няма рамка.
CELLPADDING="число" Задава разстоянието между рамката и съдържанието на клетката в пиксели. По подразбиране това разстояние е 1.
CELLSPACING="число" Задава разстоянието между клетките на таблицата в пиксели. По подразбиране това разстояние е 2.
HEIGHT="височина" Задава височината на таблицата в:

пиксели - (напр. HEIGHT="60");
-ИЛИ-
процент от височината на прозореца - (напр. HEIGHT="20%").
WIDTH="ширина" Задава ширината на таблицата в:

пиксели - (напр. WIDTH="60");
-ИЛИ-
процент от ширината на прозореца - (напр. WIDTH="20%").

\..........Подходящи примери

За използването на атрибутите на елемента TABLE, разгледайте пример 1.
Go to Top


3. Елемент CAPTION.

\..........Описание

Елементът CAPTION създава заглавие на таблица. Използва се в рамките на елемента TABLE.

\..........Синтаксис

<CAPTION ALIGN="top"|"bottom">
.....
</CAPTION>

\..........Атрибути

Атрибут Описание
ALIGN= "top"
"bottom"
Задава разположението на заглавието спрямо таблицата.

top - разполага заглавието над таблицата. Използва се по подразбиране.

bottom - разполага заглавието под таблицата;

\..........Подходящи примери

За използването на елемента CAPTION, разгледайте пример 1.
Go to Top


4. Елемент TR (Table Row).

\..........Описание

Елементът TR създава ред на таблица.
Използва се в рамките на елемента TABLE.
Съдържа елементите TH и TD.

\..........Синтаксис

<TR
    ALIGN="left"|"center|"right"
    VALIGN="top"|"middle"|"bottom"
    BGCOLOR="цвят">
.....
</TR>

\..........Атрибути

Атрибут Описание
ALIGN= "left"
"center"
"right"
Задава хоризонталното разположение на съдържанието на клетките от един ред на таблицата:

left - ляво подравняване. Използва се по подразбиране;

center - центриране;

right - дясно подравняване.
VALIGN= "top"
"middle"
"bottom"
Задава вертикалното разположение на съдържанието на клетките от един ред на таблицата.

top - съдържанието се рзполага в горния край на клетките.

middle - съдържанието се рзполага в средата на клетките. Използва се по подразбиране;

bottom - съдържанието се рзполага в долния край на клетките.
BGCOLOR="цвят" Задава цвета на фона на реда от таблицата. На отделните клетки, създавани чрез TD и TH, може да бъде зададен различен фон.

\..........Подходящи примери

За използването на атрибутите на елемента TR, разгледайте пример 2.
Go to Top


5. Елементи TH (Table Header) и TD (Table Data).

\..........Описание

Елементът TH създава "заглавна" клетка на таблица.
Елементът TD създава обикновена клетка на таблица.
TH и TD се използват в рамките на елемента TR.
Обикновено браузерите изобразяват текста, съдържащ се в TH в почернен шрифт и го центрират, което е единствената разлика между TH и TD.

\..........Синтаксис

<TH
    ALIGN="left"|"center"|"right"
    VALIGN="top"|"middle|"bottom"
    BGCOLOR="цвят"
    COLSPAN="число"
    ROWSPAN="число">
.....
</TH>

<TD
    ALIGN="left"|"center"|"right"
    VALIGN="top"|"middle"|"bottom"
    BGCOLOR="цвят"
    COLSPAN="число"
    ROWSPAN="число">
.....
</TD>

\..........Атрибути

Елементите TH и TD имат следните атрибути:
Атрибут Описание
ALIGN= "left"
"center"
"right"
Задава хоризонталното разположение на съдържанието на клетката.

left - ляво подравняване. Използва се по подразбиране;

center - центриране;

right - дясно подравняване.
VALIGN= "top"
"middle"
"bottom"
Задава вертикалното разположение на съдържанието на клетката.

top - съдържанието се рзполага в горния край на клетката.

middle - съдържанието се рзполага в средата на клетката. Използва се по подразбиране;

bottom - съдържанието се рзполага в долния край на клетката.
BGCOLOR="цвят" Задава цвета на фона на клетка от таблицата.
COLSPAN="число" Задава броя на колоните, които обхваща клетката.
ROWSPAN="число" Задава броя на редовете, които обхваща клетката.

\..........Подходящи примери

За използването на атрибутите на елементите TH и TD, разгледайте пример 3.
Go to Top


6. Примери

Изберете пример и се придвижете под текстовото поле, за да видите HTML кода.

Пример 1: Атрибути на TABLE.
Пример 2: Атрибути на TR.
Пример 3: Атрибути на TH и TD.
Preview
Go to Top