Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
15
Добавлен:
15.01.2021
Размер:
41.47 Кб
Скачать

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

Тема:Таблиці

Мета:

використовуючи таблиці оформити HTML сторінку, відповідаючи необхідним вимогам

Теоретичні відомості

Одним з найбільш могутніх і широко вживаних в HTML засобів є таблиці. Поняття табличного представлення даних не потребує додаткового пояснення. У HTML таблиці використовуються не тільки традиційно, як метод представлення даних, але і як засіб форматування Web-сторінок, завдання взаємного розташування елементів сторінки. При перегляді такого документа відразу не видно, що для його побудови використовується таблиця, оскільки рамки навколо її осередків не промальовувалися.

Розглянем спочатку мінімальний набір тегів і їх параметрів: Опис таблиць повинен розміщуватись усередині розділу документа <BODY>

Документ може містити довільне число таблиць, причому допускається і вкладеність таблиць один в одного. Кожна таблиця повинна починатися тегом

<TABLE>

і завершуватися тегом

</TABLE>

Усередині цієї пари тегів розташовується опис вмісту таблиці. Будь-яка таблиця складається з однієї або декількох рядків, в кожній з яких задаються дані для окремих осередків.

<TABLE>...</TABLE>

Атрибути:

ALIGN (LEFT, CENTER, RIGHT) - Встановлює розташування таблиці по відношенню до полів документа. WIDTH - Ширина таблиці. Її можна задати в пікселах (наприклад, WIDTH=400 ) або у відсотках від ширини сторінки (наприклад, WIDTH=80% ). BORDER - Встановлює ширину зовнішньої рамки таблиці і осередків в пікселах (наприклад, BORDER=4 ). Якщо атрибут не встановлений, таблиця показується без рамки. CELLSPACING - Встановлює відстань між рамками елементів таблиці в пікселах CELLPADDING - Встановлює відстань між рамкою осередку і текстом в пікселах

Кожен рядок починається тегом <TR>

(Table Row) і завершується тегом

</TR>

. Окремий осередок в рядку обрамляється парою тегів

<TD>

і

</TD>

(Table Data) або

<TH>

і

</TH>

(Table Header). Тег

<TH>

використовується зазвичай для елементів-заголовків таблиці, а

<TD>

- для осередків-даних. Відмінність у використанні полягає лише в типі шрифту, використовуваного за умовчанням для відображення вмісту осередків, а також розташуванню даних усередині осередку. Вміст осередку типу

<TH>

відображається напівжирному шрифтом (Bold) шрифтом і розташовується по центру. Осередки, визначені тегом

<TD>

за умовчанням відображають дані, вирівняні вліво і посередині у вертикальному напрямі.

Теги

<TH>

і

<TD>

не можуть з'являтися поза описом рядка таблиці

<TR>

. Завершуючі коди

</TR>

</TD>

і

</TH>

можуть бути опущені. В цьому випадку кінцем опису рядка або осередку є початок наступного рядка або осередки, або кінець таблиці. Завершуючий тег таблиці

</TABLE>

не може бути опущений.

Кількість рядків в таблиці визначається числом відкриваючих тегів

<TR>

а кількість стовпців - максимальною кількістю

<TD>

або

<TH>

серед всіх рядків. Частину осередків можуть не містити ніяких даних, такі осередки описуються парою наступних підряд тегів

<TD> </TD>

. Якщо одна або декілька осередків, розташованих в кінці якого-небудь рядка, не містить даних, то їх опис може бути опущений, а браузер автоматично додасть необхідну кількість порожніх осередків. Звідси витікає, що побудова таблиць, в яких в різних строчках розташовується різна кількість стовпців одного і того ж розміру, не вирішується.

<TR>...</TR> Aтрибуты :

ALIGN - встановлює вирівнювання тексту в осередках рядка VALIGN - вертикальне вирівнювання тексту в осередках рядка VALIGN=TOP - вирівнювання по верхньому краю VALIGN=MIDDLE - по центру VALIGN=BOTTON - по нижньому краю VALIGN=CENTER VALIGN=BASELINE bgcolor - колір фону bordercolor - колір рамки рядка

<TD>...</TD>

Aтрибуты :

NOWRAP - вміст осередку показувати в один рядок COLSPAN - розмах осередку по горизонталі. Наприклад, COLSPAN=3 - осередок на 3 колонки ROWSPAN - розмах осередку по вертикалі. Наприклад, ROWSPAN=2 - осередок, за нею 2 рядки ALIGN - вирівнювання тексту в осередках VALIGN - вертикальне вирівнювання VALIGN=TOP - по верхньому краю VALIGN=MIDDLE - по центру VALIGN=BOTTOM - по нижньому краю WIDTH - ширина осередку в пікселях HEIGHT - висота осередку в пікселях

Кожен окремий осередок усередині таблиці можна розглядати як область для незалежного форматування. Всі правила, які діють для управління відображенням тексту, можуть бути використані для форматування тексту усередині осередку. Усередині осередку допустиме використання всіх елементів HTML, які можуть з’являтись всередині тіла документа <BODY>

зокрема теги, керівники розташуванням тексту -

<P>

<BR>

<HR>

коди заголовків

<H1>...<H6>

теги форматування символів -

<B>

<I>

<STRONG>

<BIG>

<EM>

<FONT>

теги ставки графічних зображень

<IMG>

гіпертекстових посилань

<A>

і т.д.

Завдання:

1.Використовуючи таблиці оформити HTML сторінку

2.Таблиця повинна містити об'єднані рядки і стовпці

3.Повинен бути заданий фон, а також вставлено фото або зображення

У рядках необхідно використовувати елементи HTML для форматування тексту усередині осередку

Контрольнi запитання.

  1. Назвати основнi теги для складання HTML таблиць. Iх призначення.

  1. Яку кiлькiсть HTML таблиць може мiстити документ?

  1. Якi атрибути використовують для правильного розташування

таблицi по вiдношенню до ii полiв?

  1. Якi правила дiють для відображення даних в осередку таблицi та ii форматуваннi?