ТОП 10:

Тема: Побудова таблиць у 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ншу таблицю.

 

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

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


 


 


 


 


 


 


 


 


 


 

 

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







Последнее изменение этой страницы: 2016-04-19; Нарушение авторского права страницы

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 34.236.245.255 (0.007 с.)