Вирівнювання даних у стовпцях таблиці

Тег <COLGROUP> дозволяє об'єднувати декілька стовбців таблиці в групу.

Тег <COL> - дозволяє виділити один стовбець таблиці.

Теги <COL> і <COLGROUP> повинні розташовуватися відразу за описом тегу <TABLE>, перед першою появою тегу <TR>. У цих тегів є параметр span, що визначає кількість суміжних стовпчиків, на які поширюється їх дія; й параметр align, що визначає горизонтальне вирівнювання в стовпці.

Тег <COLGROUP> має ще параметр valign – вертикальне вирівнювання в комірках таблиці і виконує умовне об'єднання комірок у групу.

Завдання кольору рамок таблиці

У тегах <TABLE>, <TD>, <TH>, <TR> для завдання кольору рамок таблиці можна використовувати наступні параметри:

· bordercolor - визначає колір всіх рамок таблиці;

· bordercolorlight – визначає колір верхнього та лівого країв таблиці;

· bordercolordark – колір протилежних країв таблиці.

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

Завдання фонового малюнка для таблиці

Для завдання фонового малюнка для таблиці використовується параметр background, який задається в тегах <TABLE>, <TD> і <TH>

Структурування таблиці

Теги <THEAD> і <TFOOT> використовуються для опису верхнього й нижнього колонтитулів таблиці й повинні перебувати тільки усередині таблиці й зустрічатися не більше одного разу. Ці теги зручно використовувати при створенні великих таблиць, які виходять за рамки однієї сторінки.

Параметр frame тегу <TABLE> здійснює промальовування рамок навколо таблиці й може приймати наступні значення, вказані в таблиці 2.

Таблиця 2. Значення параметра frame

border або box	Рамка малюється зі всіх чотирьох сторін
above	Рамка малюється тільки з верхньої сторони таблиці
below	Рамка малюється тільки з нижньої сторони таблиці
hsides	Малюється тільки нижня й верхня сторони рамки навколо таблиці
vsides	Малюється ліва й права сторони рамки навколо таблиці
lhs	Малюється рамка тільки з лівої сторони
rhs	Малюється рамка тільки з правої сторони
void	Таблиця без зовнішніх рамок

Таблиця 3. Значення параметра rules - промальовування ліній сітки таблиці

all	Малюються всі внутрішні лінії сітки таблиці
groups	Малюються тільки лінії сітки таблиці, що розділяють групи комірок
rows	Малюються тільки лінії сітки таблиці, що розділяють рядки
cols	Малюються тільки лінії сітки таблиці, що розділяють стовпці
none	Внутрішні лінії сітки таблиці не малюються-+

Завдання числа стовпців таблиці

За допомогою значення параметру cols тегу <TABLE> можна визначити число стовпців у таблиці. Запис цього параметра дозволяє прискорити процедуру верстки таблиці при відображенні в браузері, тому що з'являється можливість визначити кількість стовпців до закінчення завантаження коду опису таблиці.

Зауваження

Промальовування ліній сітки таблиці й рамок буде здійснюватися тільки при наявності ненульового параметра border тегу <TABLE >

Завдання до лабораторної роботи

Завдання №1

1. За допомогою Dreamweaver створіть Web- сторінку table1.html і збережіть її на диску D в папці Web.

2. Створити в документі table.html таблицю успішності групи, яка містить стовпці: «Номер», «Прізвище», «Ім'я», «Середній бал».

3. Зробити заголовок таблиці зеленим кольором.

4. Вирівняти перший стовпчик по горизонталі - по лівому краю, по вертикалі – по верхньому; другий стовпчик по горизонталі - по правому краю, по вертикалі - по нижньому; третій стовпчик по горизонталі - по центру, по вертикалі - по центру.

5. Залите таблицю будь-якою текстурою, виділивши заголовок заливанням кольором.

Завдання №2

1. За допомогою Dreamweaver створіть Web- сторінку table2.html і збережіть її на диску D в папці Web.

2. Створіть в документі table2.html показану нижче таблицю.

 

Таблиця до завдання №2. Прайс аркуш.

№ п/п	Вид операції: пропозиція/попит	Назва товару, послуги (35 символів, разом з розділовими знаками й пробілами)	Ціна (10 символів, разом з розділовими знаками й пробілами)	№ і назва рубрики	Телефон
1	пропозиція	Рибні консерви в томатному соусі	від 0,8 грн.	1.3 Риба, рибні вироби, морепродукти	458-213
2	пропозиція	Картон	договірна	24.7 Папір, картон і ін. сировина й матеріали для поліграфії	458-213

 

Завдання №3

1. За допомогою Dreamweaver створіть Web- сторінку table3.html і збережіть її на диску D в папці Web.

2. Створіть в документі table3.html показану нижче таблицю.

3. Встановіть для кожної з комірок створеної таблиці в стовбці «Предмет» власний колір фону та колір тексту.

Таблиця для завдання №3

Заголовок таблиці

Магазин «Шкільний світ» пропонує підручники:

Предмет	Розділ	Класи
Математика	Арифметика	1-4
	Алгебра	5-11
	Геометрія	7-11
	Тригонометрія	10-11
	Кількість найменувань: 1090
Фізика	Механіка	5-7
	Електрика	7-9
	Оптика	10-11
	Кількість найменувань: 457

 

Завдання № 4

1. За допомогою Dreamweaver створіть Web- сторінку lr6_1.html і збережіть її на диску D в папці Web.

2. У документі lr6_1.html створити наступну таблицю за зразком.

Таблиця для завдання №1. Розклад руху.

РОЗКЛАД

руху пасажирських поїздів станції ЛУГАНСЬК на 2002 - 2003 р.