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

Програмні засоби: редактор Блокнот, браузер Explorer або Opera. Теоретичні відомості. Таблиці на WEB-формах мають величезне значення і використовуються не тільки за звичайним призначенням. Ми звикли до того, що таблиця призначена для розміщення текстових даних у певній формі, у відведених для них комірках. У WEB-формах таблиці використовують також для розміщення різних матеріалів сторінки в потрібних місцях, тобто таблиці грають роль розмітки сторінки. До появи мови CSS саме за допомогою таблиць виконувалось розташування матеріалів на сторінці. Ми також скористаємось цими засобами. Отже для створення таблиці використовується тег <table>, який повідомляє браузеру про початок таблиці. Після опису таблиці її необхідно буде закрити тегом </table>. Для опису таблиці використовують теги: <tr> - " t able r ow/ряд таблиці" <td> - " t able d ata/табличні дані" Повний опис таблиці виглядає так:<table> відкриття таблиці <tr> відкриття рядка таблиці <td>Дані 1</td> комірка з даними <td>Дані 2</td> комірка з даними </tr> закриття рядка таблиці <tr> відкриття рядка таблиці <td>Дані 3</td> комірка з даними <td>Дані 4</td> комірка з даними </tr> закриття рядка таблиці </table> закриття таблиці В браузері це буде виглядати так:

Дані 1	Дані 2
Дані 3	Дані 4

Все, що ви розмістите між тегами <td> і </td> буде вмістом відповідної комірки таблиці. Якщо необхідно зробити три рядки по чотири комірки вам необхідно буде тричі відкривати рядки і в кожному з них вказати по чотири комірки. Завдання 1: Створіть WEB-сторінку з таблицею, яка складається з чотирьох рядків по три комірки в кожній. В кожній комірці запишіть числа (по одному в кожній) від 1 до 12. Назвіть вашу сторінку, відкрийте її в браузері і подивіться результат. Теоретичні відомості. У таблиць є досить багато атрибутів. Розглянемо їх. Атрибут border дозволяє встановити товщину рамки таблиці у пікселях. Якщо вказати border=0 то таблиця буде без рамки. От як це записується:<table border="1"> встановлює товщину рамки в 1 піксель Атрибут width встановлює ширину таблиці у відсотках від ширини сторінки. Наприклад:<table border=”2” width=”40%”> встановлює ширину таблиці 40% від ширини сторінки і товщину бордюру 2 пікселі Два атрибути align та valign дозволяють дозволяють виконувати вирівнювання в таблиці, рядку або комірці по горизонталі та вертикалі:

- align може приймати значення left (по лівому краю), center (по центру), right (по правому краю)

- valign може приймати значення top(вгорі), middle (посередині), bottom (внизу)

Наприклад для рядка це записується так:

<tr align=”center” valign=”top”>

Необхідно нагадати, що ці атрибути можуть застосовуватись як для всієї таблиці, так і для окремого рядка чи комірки. При цьому вони записуються в тому тегу, в якому їх необхідно застосувати.

Завдання 2:

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

Дата добавления: 2015-10-02