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

↑

▷ Содержание

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

Тег <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

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

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

За допомогою значення параметру 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. Прайс аркуш.

Завдання №3

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

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

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

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

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

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

Завдання № 4

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

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

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

РОЗКЛАД

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

№

найменування

поїзду

часи, години

прибуття

в кінцевий

пункт

відправлення з

кінцевого

пункту

дні

слідування

БЕЗПЕРЕСАДОЧНІ ВАГОНИ