Варна - 2006

Съдържание:

HTML - Въведение
HEAD
BODY - фон, текст, цветове на връзките
FONT - работа с текстове
Форматиране на параграфи
Цветове
Хипервръзки
IMG - Изображения
Таблици
Списъци
Формуляри
Линии
Фреймове
Музикален фон

Таблици

  • Таблиците са изключително важен инструмент при създаването на една уеб-страница.
  • Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа.
  • В клетките на таблиците може да се пише текст, като параметрите му се определят чрез познатия вече таг font и съответните му атрибути.
  • В таблиците може да се поставят и изображения – чрез познатия таг img в клетката, в която желаете да се появи изображението.
  • Могат да се влагат таблици една в друга.
  • Могат да се сливат клетки с атрибутите - colspan и rowspan .

Тагове за създаване на таблица:

  • Таблиците в HTML-документа винаги са разположени между двата основни тага
    <table> и </table>.
  • Между тези два тага се изписват:
    • таговете за табличен ред - <tr> и </tr>
    • таговете за таблична клетка, чрез които се оформят редовете и колоните - <td> и </td >
  • Ако искаме таблицата да има очертания се добавя атрибута BORDER.
     

    Пример: Кода на таблица само с две колони и с три реда изглежда така:

     

    <table border="1">
        <tr>
          <td align="center">1-ви ред, 1-ва колона </td>
    <td align="center">1-ви ред, 2-ра колона </td>  </tr>
        <tr>
          <td>2-ри ред, 1-ва колона </td>
    <td>2-ри ред, 2-ра колона </td>     </tr>
        <tr>
          <td>3-ти ред, 1-ва колона </td>
    <td>3-ти ред, 2-ра колона </td>
       </tr>
    </table>

    1-ви ред, 1-ва колона
    1-ви ред, 2-ра колона
    2-ри ред, 1-ва колона
    2-ри ред, 2-ра колона
    3-ти ред, 1-ва колона
    3-ти ред, 2-ра колона

     

Атрибути на таговете за оформяне на таблици:

  • border и bordercolor ;
  • bgcolor - цвят на вътрешното пространство
  • width и height - ширина и височина (в цели числа или в %)
  • cellspacing и cellpadding - разстояние между клетките и между текста и очертанията
  • align и valign - хоризонтално и вертикално местоположението на таблицата на екрана;

 

Упражнение 13:

а) Копирайте следния текст в лявата част на прозореца по-долу и натиснете бутона над него.

<html>
<body>

<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

б) Вмъкнете в BODY таблица с по-дебела рамка:

<h4>С дебела рамка :</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

в) Изтрийте атрибута border, за да получите таблици без очертани рамки.

г) Това е пример за сливане на клетки от таблицата:

<html>
<body>

<h4>Сливане на две колони :</h4>
<table border="1">
<tr>
<th>Име</th>
<th colspan="2">Телефон</th>
</tr>
<tr>
<td>Бил Гейтс </td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>Сливане на два реда </h4>
<table border="1">
<tr>
<th>Име:</th>
<td>Бил Гейтс </td>
</tr>
<tr>
<th rowspan="2">Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

д) Добавете атрибутите за контрол на разстоянието между клетките и съдържанието от стените на таблицата.

е) Добавете атрибут за цвят на таблицата bgcolor, а също и за цвят на клетка:

<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

Цвета на клетка ще се промени като добавите bgcolor към тага td.

Упражнение 14:

Таблици в Dreamweaver

  1. От менюто изберете Insert/Table (Ctrl+Alt+T) или изберете таблицата от лентата с инструменти
  2. Посочете броя редове и колони, а също дали да има рамка и колко да е дебела.
  3. Може да се избере какъв процент от екрана да заема или да се посочи точно колко пиксела да е широка и висока.
  4. Когато е маркирана таблица в документа в секцията Properties също могат да бъдат променяни атрибутите, да се управлява начина на подравняване хоризонтално и вертикално и да се посочват цвят или фон-картинка за клетките.
  5. Сливането на клетки става от менюто Modify/Table - Merge Cell или Split Cell
JDJ © 2006 Всички права запазени.