- •Міністерство освіти і науки України
- •Поради при створенні Web-сторінки
- •Завдання до лабораторних робіт
- •Лабораторна робота №1 Простий документ html. Форматування тексту
- •Завдання до лабораторної роботи №1 для самостійного виконання
- •Студент групи *-ек а.П.Іванов Лабораторна робота №2 Графіка
- •Завдання до лабораторної роботи №2 для самостійного виконання
- •Лабораторна робота №3 Таблиці
- •Завдання до лабораторної роботи №3 для самостійного виконання
- •Лабораторна робота №4 Списки
- •Завдання до лабораторної роботи №4 для самостійного виконання
- •Лабораторна робота №5 Гіпертекстові посилання
- •Завдання до лабораторної роботи №5 для самостійного виконання
- •Лабораторна робота №6 Сенсорні зображення
- •Завдання до лабораторної роботи №6 для самостійного виконання
- •Лабораторна робота №7 Створення і використання форм
- •Завдання до лабораторної роботи №7 для самостійного виконання
- •Лабораторна робота №8 Фрейми
- •Завдання до лабораторної роботи №8 для самостійного виконання
- •Використана література
Лабораторна робота №3 Таблиці
Важливим інструментом Web-дизайну є таблиці, які використовуються не лише для виведення табличних даних, але і для управління взаємним розміщенням тексту й графіки, створення колонок газетного типу, кольорових ефектів та ін. Таблиця задається тегом <TABLE>…</TABLE>, що має цілий ряд опцій:
Таблиця 2
|
Опція |
Призначення |
|
ALIGN="вирівнювання" |
Вирівнювання усієї таблиці відносно тексту, в якому вона знаходиться (left, center або right) |
|
BORDER="число" |
Ширина бордюру таблиці, у пікселях |
|
CELLSPACING="число" |
Відстань між комірками, у пікселях |
|
CELLPADDING="число" |
Розмір вільного простору між границями комірки та її вмістом, у пікселях |
|
HSPACE="число" |
Розмір вільного простору зліва та справа від таблиці, у пікселях |
|
VSPACE="число" |
Розмір вільного простору зверху і знизу від таблиці, у пікселях |
|
WIDTH="ширина" |
Ширина таблиці у пікселях або відсотках від ширини вікна броузера |
|
BACKGROUND="IMAGES\ptichka.jpg" |
Заповнює комірку фоновим малюнком. Необхідно вказати URL малюнка |
|
BGCOLOR="CCFFFF" |
Визначає колір фону комірки |
|
COLSPAN |
Визначає кількість стовпців, які обєднуються. За замовчуванням має значення 1 |
|
ROWSPAN |
Визначає кількість рядків, які обєднуються. За замовчуванням має значення 1 |
|
VALIGN |
Визначає спосіб вертикального вирівнювання змісту комірки. Можливі значення: top, bottom, middle. За замовчуванням – рівняння по центру (VALIGN="middle) |
Таблицю визначають таким чином:
<table>
<tr>
<td>Вміст комірки</td>
<td>Вміст комірки</td>
...
</tr>
<tr>
<td>Вміст комірки</td>
<td>Вміст комірки</td>
...
</tr>
...
</table>
Тег <TR>…</TR> визначає рядок таблиці, а тег <TD>…</TD> — комірку в рядку. Якщо комірку треба залишити пустою, то в неї розміщують символ пропуску
Завдання 1. Створити таблицю.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE> Розклад занять навчальних груп
</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<P ALIGN=CENTER>
<FONT COLOR="RED" SIZE="6" FACE="ARIAL">
<B> Навчальна група
</B></FONT><BR></P>
<FONT COLOR="BLUE"SIZE="4" FACE="COURIER">
<B> Понеділок </B></FONT><BR>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#009966" bordercolordark="#9999FF">
<tr bgcolor="#9999FF">
<td> Заняття </td>
<td> 1 група </td>
<td> 2 група </td>
<td> 3 група </td>
</tr>
<tr bgcolor="#33CCCC">
<td> 1</td>
<td> Інформатика </td>
<td> Історія </td>
<td> Математика </td>
</tr>
<tr bgcolor="#33CCCC">
<td> 2</td>
<td> Російська мова </td>
<td> Література </td>
<td> Англійська мова </td>
</tr>
<tr bgcolor="#33CCCC">
<td> 3</td>
<td> Математика </td>
<td> Математика </td>
<td> Історія </td>
</tr>
</table>
</BODY>
</HTML>
У цьому прикладі границя таблиці виконана у двох кольорах. Це досягається за рахунок використання атрибутів BORDERCOLORLIGHT та BORDERCOLORDARK.
Завдання 2. Створити “неправильну” таблицю.
|
|
Характеристики | ||
|
Середній зріст, см |
Середня вага, кг | ||
|
Стать |
Чоловіча |
177 |
73 |
|
Жіноча |
166 |
65 | |
......................................................................................
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" rowspan="2"> </td>
<td colspan="2">Характеристики</td>
</tr>
<tr>
<td> Середній зріст, см </td>
<td> Середня вага, кг </td>
</tr>
<tr align="center">
<td rowspan="2">Пол</td>
<td> Чоловіча </td>
<td>177</td>
<td>73</td>
</tr>
<tr align="center">
<td> Жіноча </td>
<td>166</td>
<td>65</td>
</tr>
</table>
........................................................................