Тема: Побудова таблиць у HTML документах.

Мета:

1. Опанувати методику створення документа у форматі HTML.
2. Опанувати основнi принципи представлення iнформацiї у виглядi гiпертексту.

 

Теги форматування таблиці.

Початок описання таблиці позначаеться тегом <TABLE>. Кінець опису таблиці позначаеться тегом </TABLE>. Між ціма тегами розташовується тіло таблиці. Воно склдається з рядків, якi позначаються тегами <TR> </TR>, та стовбчиків, які позначаються тегами <TD> </TD>. Повний формат ціх тегів такий:

• < TABLE ALIGN=LEFT|CENTER|RIGHT|BLEEDLEFT|BLEEDRIGHT|JUSTIFY BACKGROUND=url BGCOLOR=color BORDER=n BORDERCOLOR=color BORDERCOLORDARK=color BORDERCOLORLIGHT=color CELLPADDING=n CELLSPACING=n CLASS=type CLEAR=LEFT|RIGHT|ALL|NO COLS=n FRAME=frame-type ID=value NOWRAP RULES=rule-type STYLE=css1 properties VALIGN=TOP|MIDDLE|BOTTOM|BASELINE WIDTH=n>... </TABLE>
• < TR ALIGN=CENTER|LEFT|RIGHT|JUSTIFY BGCOLOR=color BORDERCOLOR=color BORDERCOLORDARK=color BORDERCOLORLIGHT=color CLASS=type ID=value NOWRAP STYLE=css1 properties VALIGN=MIDDLE|TOP|BOTTOM|BASELINE>... </TR>
• < TD ALIGN=CENTER|LEFT|RIGHT|JUSTIFY BACKGROUND=url BGCOLOR=color BORDERCOLOR=color BORDERCOLORDARK=color BORDERCOLORLIGHT=color CLASS=type COLSPAN=n HEIGHT=n ID=value NOWRAP ROWSPAN=n STYLE=css1 properties VALIGN=MIDDLE|TOP|BOTTOM|BASELINE WIDTH=n>... </TD>

Цi теги мають такi основнi атрибути:

• ALIGN - задає положення таблицi на сторiнцi;
• VALIGN - визначає режим вирiвнювання змiсту комiрки по вертикалi;
• BORDER - визначає товщину рамки у пiкселях;
• BACKGROUND - визначає посилання на файл фонового малюнку;
• BGCOLOR - визначає фоновий колiр таблицi;
• BORDERCOLOR - визначає колiр рамки;
• BORDERCOLORDARK - визначає колiр тiньової частини рамки;
• BORDERCOLORLIGHT - визначає колiр свiтлової частини рамки;
• CELLPADDING - визначає вiдстань мiж текстом та границями комiрки (у пiкселях);
• CELLSPACING - визначає вiдстань мiж комiрками (у пiкселях);
• COLS - визначає кiлькiсть стовбчикiв у таблицi;
• WIDTH - визначає ширину таблицi, абсолютну (у пiкселях), чи вiдносно розмiрiв вiкна броузера (у вiдсотках);
• HEIGHT - визначає висоту комiрки, абсолютну (у пiкселях), чи вiдносну (у вiдсотках);
• COLSPAN - визначає кiлькiсть стовбчикiв таблицi, що займає дана комiрка;
• ROWSPAN - визначає кiлькiсть рядкiв таблицi, що займає дана комiрка;
• FRAME - задає режим представлення елементiв зовнiшньої рамки таблицi. Можливi такi значення цього атрибуту:
• void - усi зовнiшнi лiнiї вiдсутнi;
• above - вiдображається тiльки верхня лiнiя;
• below - вiдображається тiльки нижня лiнiя;
• hsides - вiдображення тiльки горизонтальних лiнiй (зверху та знизу);
• lhs - вiдображаєтья тiльки лiва границя таблицi;
• rhs - вiдображаєтья тiльки права границя таблицi;
• vsides - вiдображення тiльки вертикальних лiнiй (злiва та справа);
• box - усi зовнiшнi лiнiї вiдображаються;
• border - усi зовнiшнi лiнiї вiдображаються (цей атрибут працює по замовчанню);
• RULES - задає режим представлення внутрiшнiх лiнiй таблицi. Можливi такi значення цього атрибуту:
• none - усi внутрiшнi лiнiї вiдсутнi;
• groups - вiдображаються тiльки горизонтальнi лiнiї, що вiдокремлюють шапку вiд змiстовної частини та змiстовну частину вiд закiнчення таблицi;
• rows - вiдображаються тiльки горизонтальнi лiнiї;
• cols - вiдображаються тiльки вертикальнi лiнiї;
• all - вiдображаються усi внутрiшнi лiнiї;
• NOWRAP - вiдмiняє режим автоматичного розбиття тексту у комiрках на декiлька рядкiв.

Крім цього е додаткові теги, призначені для структурування інформації у таблици. Це теги THEAD, TFOOT, TBODY та ін. Повний формат ціх тегів такий:

• < THEAD ALIGN=LEFT|CENTER|RIGHT|JUSTIFY CLASS=type ID=value STYLE=css1 properties VALIGN= MIDDLE|TOP|BOTTOM>
• < TFOOT CLASS=type ID=value STYLE=css1 properties>... </TFOOT>
• < TBODY CLASS=type ID=value STYLE=css1 properties>... </TBODY>

Тегом <THEAD> може бути позначена заголовочна частина таблицi. Так звана "шапка". Тегом <TBODY> позначають основну частину таблицi - її змiст. Тегом <TFOOT> позначають кiнцеву частину таблицi.

 

Таблиця є складною iєрархiчною структурою. На першому рiвнi iєрархiї визначається логiчна структура таблицi за допомогою тегiв <THEAD>, <TBODY> та <TFOOT>. На другому рiвнi тегами <TR> виконується розподiл таблицi на рядки. На третьому - тегами <TD> виконується розподiл рядкiв на комiрки.

Зразок форматування таблиці:
<table border=1> <tr> <td> <p>Перша комірка</p> </td> <td> <p>Друга комірка</p> </td> </tr> <tr> <td> <p>Третя комірка</p> </td> <td> <p>Четверта комірка</p> </td> </tr> </table>	Перша комірка Друга комірка Третя комірка Четверта комірка
HTML	Загальній вигляд

У мовi HTML таблицi є дуже потужним засобом форматування Web-сто\-рi\-нок. Це обумовлено тим, що у будь-яку комiрку таблицi можна вкладати будь-який об'єкт: параграф тексту, горизонтальну розподiльчу лiнiю, зображення чи iншу таблицю.

 

Завдання для самостійної роботи

Розробити документ, який виглядає так само, як наведено на малюнку.

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

 

Лабораторна робота №4