УРОК 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="стойност" - указва разстояние между. съдържанието на клетката и стените й. Стойността може да бъде оказана в проценти от клетката или в пиксели. За да ви стане по-ясно, погледнете примера:

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

    cellspacing

Може да преминете към УРОК 14 : Таблици - 2 част =>

Нагоре