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

↑

▷ Содержание

⇐ ПредыдущаяСтр 2 из 4Следующая ⇒

Мета:

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рки.

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

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

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

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

Познавательные статьи:



Коммуникативные барьеры и пути их преодоления

Рынок недвижимости. Сущность недвижимости

Решение задач с использованием генеалогического метода

История происхождения и развития детской игры