проф. д.н.

ДАНИЕЛА БОРИСОВА
1. Въведение в уеб-програмирането – езици за уеб програмиране,
синтаксис на езика HTML
2. BOX модел. CSS – синтаксис и деклариране на стилове. Деклариране и
използване на класове и селектори
3. Форматиране на текст и списъци
4. Използване на цветове и изображения
5. Таблици – тагове и атрибути
6. Формуляри – елементи, методи за изпращане
7. Използване на рамки и мултимедия, нови елементи в HTML5,
различия между HTML и XHTML
8. Създаване на темплейти чрез CSS и HTML
9. Въведение в JavaScript. Синтаксис, типове променливи и оператори
10. JavaScript – условия, функции, регулярни изрази, обекти за дата, час,
година
Д. Борисова
 Таблиците в HTML се създават чрез 3 основни тага
<table> и </table> за начало и край на таблицата;
<tr> и </tr> за начало и край на табличен ред;
<td> и </td> за начало и край на клетка.
 Таблицата се разделя на редове с тага <tr>, а всеки ред се разделя на
клетки чрез тага <td>.
 Тагът <td> може да съдържа текст, линкове, изображения, списъци,
формуляри, други таблици и т.н.

Д. Борисова
 Ето как изглежда кодът за <table>
таблица от 3 реда и <tr>
<td> 1-ви ред, 1-ва колона</td>
1 колона: </tr>
<tr>
<td> 2-ри ред, 1-ва колона</td>
</tr>
<tr>
<td> 3-ти ред, 1-ва колона</td>
</tr>
</table>

Д. Борисова
Атрибути на <table> <table border="1">
<tr>
 border – определя дали да <th>Month</th>
се показва рамката на <th>Savings</th>
</tr>
таблицата и клетките или <tr>
не. <td>January</td>
<td>$100</td>
</tr>
</table>

Д. Борисова
 <table>
 Чрез двойката тагове <th> <tr>
<th> Приходи </th>
и </th> може да задаваме <th> Разходи </th>
заглавие в таблицата. </tr>
<tr>
Текстът, разположен между <td> 2013: 12 хил. лв.</td>
<td> 2013: 11 800 лв.</td>
тези тагове се показва </tr>
<tr>
получерен и центриран в <td> 2012: 10 хил. лв.</td>
<td> 2012: 9 900 лв.</td>
клетката на таблицата: </tr>
</table>

Д. Борисова
 <table border="1" cellspacing ="10">
Атрибути на <table> <tr>
<th>Month</th>
 cellspacing - задава простран- <th>Savings</th>
ството между клетките в брой </tr>
<tr>
пиксели <td>January</td>
<td>$100</td>
 cellpadding – задава простран- </tr>
ството между рамката на </table>

клетката и съдържанието на
клетката в брой пиксели
<table border="1" cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> Д. Борисова
 Тагът <tbody> се използва за групиране съдържанието на тялото в
HTML таблица.
 Тагът <tbody> се използва във връзка с таговете <thead> и
<tfoot> за специфициране на всяка част от таблицата (тяло,
заглавна, долна част).
 Браузърите използват тези елементи и позволяват превъртане на
тялото на таблицата независимо от заглавната и долна част.
 Когато се отпечатва голяма таблица, която обхваща няколко
страници, тези елементи дават възможност за отпечатване както на
горната, така и на долната част на всяка страница.

Д. Борисова
<table>
<thead>
<tr>  Eто и един пример за таблица,
<td>месец</td> използваща таговете
<td>спестявания</td> <thead>, <tfoot> и <tbody>:
</tr>
</thead>
<tfoot>
<tr>
<td>общо</td>
<td>140</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>януари</td>
<td>60</td>
</tr>
<tr>
<td>февруари</td>
<td>80</td>
</tr>
</tbody>
Д. Борисова
</table>
 Елементите <thead>, <tbody>, и <tfoot> не влияят върху
структурата на таблицата и на нейното визуализиране.
 Използването на различни цветове за съдържанието на елементите
<thead>, <tbody> и <tfoot> може да се реализира чрез
използване средставета на CSS:
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>

Д. Борисова
 Чрез атрибута summary може да бъде зададено кратко резюме на
таблицата, което не се визуализира в браузъра:

<table summary="Приходи и разходи на семейство Иванови">

 Ако не се използва атрибута border, таблицата ще се показва без

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

Д. Борисова
 За да се добави надпис към таблицата се използва тага <caption>:

<table border="1">
<caption> Monthly savings </caption>
…….
</table>

Д. Борисова
 Позиция на заглавието на таблицата:
caption-side: top|bottom <table>
<caption>Taблица 1.1 клиенти</caption>
<tr>
<th>Име</th>
<style> <th>Фамилия</th>
table, td, th {border:1px solid green;} <th>Спестявания</th>
</tr>
th {background-color:
<tr>
green; color:white;} <td>Петър</td>
caption {caption-side: bottom;} <td>Петров</td>
</style> <td>$100</td>
</tr>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>$150</td>
</tr>
<tr>
<td>Димитър</td>
<td>Димитров</td>
<td>$300</td>
</tr>
Д. Борисова </table>
 Атрибутът rowspan определя броя на клетките в редове, които трябва
да се обединят, а colspan определя броя клетките по колони.
<table width=500 border=1>
<tr>
<td>11</td>
<td colspan=2>12 и 13</td>
</tr>
<tr>
<td rowspan=2>21 и 31</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>32</td>
<td>33</td>
</tr>
</table>

Д. Борисова
 Таблиците могат да бъдат влагани една в друга.
<table width=70% border=1 bgcolor=#FFFF99 summary="">
<tr>
<th colspan=2>вложени таблици</th>
</tr>
<tr>
<td>
<table width=100% border=1 bgcolor=#66CCFF summary="">
<tr>
<td><img src="html.jpg" border="1" width="200" height="200" alt=""></td>
<td>основни тагове на езика HTML</td>
</tr>
</table>
</td>
<td>
<table width=100% border=1 bgcolor=#FF3399 summary="">
<tr>
<td><img src="css.jpg" border="1" width="200" height="200" alt=""></td>
<td>основни правила при използването на CSS</td>
</tr>
</table>
</td>
</tr>
</table>

Д. Борисова
Форматирането на таблици чрез CSS се реализира чрез задаване на
различни свойства на таблица. Възможни са следните форматирания на
таблици чрез свойствата:
 border-collapse – контролира границите на съседните клетки – дали
границите на клетки, които се докосват трябва да поддържат своя
стил. Възможни стойности са: collapse, separate, inherit.
 border-spacing – задава разстоянието, което трябва да се появи между
клетките на таблицата.
 caption-side – контролира разположението на елемента <caption>.
Възможни стойности са: top, bottom, inherit.
 empty-cells – определя дали границата трябва да бъде показана, ако
клетката е празна.
 table-layout – позволява на браузърите да ускорят оформлението на
таблицата с помощта на първото зададено свойство за ширина преди
да се зареди цялата таблица.
Д. Борисова
 Разстояние между клетките: border-spacing

<style>
table.ex1 {border-collapse: separate; border-spacing: 10px;}

table.ex2 {border-collapse: separate; border-spacing: 10px 50px;}

</style>

<table class="ex1" border="1">

<table class="ex2" border="1">

Д. Борисова
 Свойството border-collapse определя дали рамката на таблицата
трябва да бъде редуцирана до една обща рамка:
 separate: запазва отделните – по подразбиране
 collapse: обединява рамките на съседните клетки.
<style>
table { border-collapse: collapse;}
table, td, th { border: 1px solid black;}
</style>

Д. Борисова
 Ако искаме само 1 рамка около таблицата, свойството border
трябва да се уточни:

<style>
table { border-collapse: collapse; border: 1px solid black;}
</style>

Д. Борисова
 Свойството background- table
image задава фоновото {background-image:
изображение на даден елемент. url(image/back.gif);}

 фоновото изображение на table

клетките може да бъде {background-color: #4CAF50;}
определено чрез прилагане на
това свойство за TABLE, TR, TD
tr.example
или TH елементите. {background-color: red;}
 Свойствата background-
repeat и background-
td.example
position могат да бъдат {background-color: red;}
уточнени също.

Д. Борисова
Д. Борисова
 Ширината и височината на на таблица се определя от свойствата
width и height.
<style>
table, td, th {border: 1px solid black;}
table {border-collapse: collapse; width: 100%;}
th {height: 50px;}
</style>

Д. Борисова
 Свойството text-align задава хоризонталното подравняване (left, right,
или center) на съдържанието в <th> или <td>. По подразбиране,
съдържанието на <th> елемента е центрирано, а съдържанието на
елементите <td> е ляво подравнено.
<style>
table, td, th {border: 1px solid black;}
table {border-collapse: collapse; width: 100%;}
th {text-align: left;}
</style>

Д. Борисова
 Свойството vertical-align задава вертикалното подравняване (top,
bottom, или middle) на съдържанието в <th> или <td>. По
подразбиране, вертикалното подравняване на съдържанието на
таблицата е middle (за <th> и <td>).
 ..
<style>
table, td, th {border: 1px solid black;}
table {border-collapse: collapse; width: 100%;}
td {height: 50px; vertical-align: bottom;}
</style>

Д. Борисова
 Пространството между рамката и съдържанието на клетките от
таблицата се контролира чрез свойството padding:
<style>
table, td, th {border: 1px solid #ddd; text-align: left;}
table {border-collapse: collapse; width: 100%;}
th, td {padding: 15px;}
</style>

Д. Борисова
 Свойството border-bottom към <th> и <td> добавя с хоризонтални
линии/разделители:

<style>
table {border-collapse: collapse; width: 100%;}
th, td {padding: 8px; text-align:left;
border-bottom: 1px solid red;}
</style>

Д. Борисова
 За таблица с вдуцветни ивици се използва селектора nth-child() за
да се добави background-color на всички четни (или нечетни)
таблични редове:
<style>
table {border-collapse: collapse; width: 100%;}
th, td {text-align: left; padding: 8px;}
tr:nth-child(even){background-color: red}
</style>

Д. Борисова
 Примерът по-долу определя фоновия цвят на клетката и цвета на
текста за елементите <th>:
<style>
table {border-collapse: collapse; width: 100%;}
th, td {text-align: left; padding: 8px;}
tr:nth-child(even){background-color: #99CCCC}
th {background-color: green; color: white;}
</style>

Д. Борисова
 Свойството empty-cells има две стойности:
 show: показва с рамка празните клетки – по подразбиране
 hide: не показва рамка около празните клетки

<style>
table.empty{ width:350px;
border-collapse:separate;
empty-cells:hide;}
td.empty{ padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;}
</style>

Д. Борисова
<table class="empty">
<caption>Taблица 1. Скриване на границитe
на празните клетки</caption>
<tr>
<th></th>
<th>Заглавие 1</th>
<th>Заглавие 2</th>
</tr>
<tr>
<th>Заглавие на реда</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th> Заглавие на реда </th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>

Д. Борисова
 Използване на атрубута id за определяне свойства на таблица

<style>
table {width:100%;}
table, th, td {border: 1px solid black; border-collapse:
collapse;}
th, td {padding: 5px; text-align: left;}

table#t01 tr:nth-child(even) {background-color: #eee;}

table#t01 tr:nth-child(odd) {background-color:#fff;}
table#t01 th { background-color: black; color: white;}
</style>

Д. Борисова
 2 таблици: <table> и <table id="t01">

Д. Борисова
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a { border-style:dotted; border-width:3px;
border-color:blue; padding: 10px; }
td.b { border-style:solid; border-width:3px;
border-color:red; padding:10px; }
</style>
<table class="one">
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>

<table class="two">
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
Д. Борисова
Д. Борисова
table-layout – Задава алгоритъм за оформление
table-layout: auto|fixed|initial|inherit

<style>
table { border-collapse: collapse; border: 1px solid black;}
th,td { border: 1px solid black;}
table.a { table-layout: auto; width: 180px; }
table.b { table-layout: fixed; width: 180px; }
table.c { table-layout: auto; width: 100%; }
table.d { table-layout: fixed; width: 100%; }
</style>

Д. Борисова
Д. Борисова