Роздрукувати сторінку

Главная \ Методичні вказівки \ Методичні вказівки \ 859 Лабораторна робота 6 на тему Створення таблиць з курсу Сучасні Internet-технології, НУДПСУ

Лабораторна робота 6 на тему Створення таблиць з курсу Сучасні Internet-технології, НУДПСУ

« Назад

Лабораторна робота № 6 Створення таблиць

Мета роботи: навчитись створювати таблиці.

Хід роботи

1. Скопіювати у теку HTML видані викладачем графічні файли Zamok.jpg та Tochka.jpg, Yellow.jpg.

2. У теці HTML створити текстовий документ з назвою Table.html, відкрити його за допомогою браузера та перейти до редагування HTML-коду.

3. Створимо таблицю, яка складається із двох рядків та трьох стовпчик та містить текстову інформацію. Структура таблиці подана на рис.1.

11	12	13
21	22	23

Рис. 1. Таблиця, яку необхідно відобразити у вікні браузера

Записуємо відповідний HTML-код файлу Table.html з цієї таблиці (границі поки що невидимі) та переглянемо її у браузері (рис. 2):

<html>

<head>

<title>Створення таблиць </title>

</head>

<body>

<table>

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

</tr>

</ table>

</body>

</html>

4. Визначимо границі таблиці. Реалізуємо це за допомогою параметра border. Колір границі задається параметром bordercolor="колір_границі". Для визначення таблиці із границями чорного кольору, товщина яких дорівнює 3 пікселі, необхідно записати наступний код:

...

<table border="3" bordercolor="#000000" >

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>23</td>

</tr>

</ table>

</body>

Переглянемо цю таблицю у браузері (рис. 3)

5. Визначимо фон таблиці. Реалізуємо за допомогою параметра bgcolor =" колір_фону". Записуємо HTML-код для таблиці із сірим кольором фону та переглянемо її у браузері (рис. 4):

…

<table border="3" bordercolor="#000000" bgcolor="#999999">

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>23</td>

</tr>

</ table>

</body>

6. Записуємо HTML-код для таблиці із білими та сірими кольорами фону для сусідніх комірок та переглянемо її у браузері (рис. 5):

…

<table border="3" bordercolor="#000000">

<tr>

<td bgcolor="#ffffff">11</td>

<td bgcolor="#999999">12</td>

<td bgcolor="#ffffff">13</td>

</tr>

<tr>

<td bgcolor="#999999">21</td>

<td bgcolor="#ffffff">22</td>

<td bgcolor="#999999">23</td>

</tr>

</ table>

</body>

7. Визначимо висоту рядків та ширину стовпців. Створимо таблицю із рядками висотою 40 та стовбцями шириною стовбців 60 пікселів. Ширина стовпців та висота рядків задається за допомогою параметрів width та height відповідно. Записуємо HTML-код для заданої таблиці та переглянемо її у браузері (рис. 6):

…

<table border="3" bordercolor="#000000">

<tr>

<td width = "60" bgcolor = "#999999">12</td>

<td width = "60" bgcolor = "#ffffff">13</td>

</tr>

<tr>

<td height = "40" width = "60" bgcolor = "#999999">21</td>

<td width = "60" bgcolor = "#ffffff">22</td>

<td width = "60" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

8. Визначимо висоту та ширину для всієї таблиці, тоді всі комірки (стовпчики) та рядки поділять даний їм простір порівну, якщо не задавати особисто цього простору у відсотках чи пікселях. Записуємо HTML-код для такої таблиці та переглянемо її у браузері (рис. 7 ):

…

<table border="3" bordercolor="#000000" bgcolor = "#999999" height = "200" width = "200">

<tr>

<td>11</td><td>12</td><td>13</td>

</tr><tr>

<td>21</td><td>22</td><td>23</td>

</tr>

</table>

</body>

9. Для таблиці, поданої на рис. 7, визначимо висоту рядків та ширину стовпчиків у відсотках до висоти та ширини всієї таблиці. Записуємо необхідний HTML-код та переглянемо таблицю у браузері (рис. 8):

…

<table border="3" bordercolor="#000000" height = "200" width = "200" >

<tr>

<td height = "20%" width = "20%" bgcolor = "#ffffff">11</td>

<td width = "30%" bgcolor = "#999999">12</td>

<td width = "50%" bgcolor = "#ffffff">13</td>

</tr><tr>

<td height="80%" width= "20%" bgcolor = "#999999">21 </td>

<td width = "30%" bgcolor = "#ffffff">22</td>

<td width = "50%" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

10. Зробимо вертикальне та горизонтальне вирівнювання змісту таблиці. Таблиця, яку необхідно отримати, зображена на рис. 9.

Реалізуємо це за допомогою параметра valign="middle" (top, bottom) для вертикального вирівнювання та параметра align="center" (left, right) для горизонтального вирівнювання. Записуємо HTML-код для заданої таблиці та переглянемо її у браузері (рис. 10):

…

<table border="3" bordercolor="#000000" >

<tr>

<td height="40" width="60" valign="top" align="left" bgcolor = "#ffffff">11</td>

<td width="60" valign="middle" align="center" bgcolor = "#999999">12</td>

<td width="60" valign="bottom" align="right" bgcolor = "#ffffff">13</td>

</tr>

<tr>

<td height="40" width="60" valign="top" align="left" bgcolor ="#999999">21</td>

<td width="60" valign="middle" align="center" bgcolor = "#ffffff">22</td>

<td width="60" valign="bottom" align="right" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

11. Об’єднаємо у першому рядку таблиці (рис.10) перші дві комірки та задамо для них сірий колір фону. Для цього використаємо параметр colspan, який визначає кількість стовпчиків у об’єднаній комірці. Записуємо необхідний HTML-код:

…

<table border="3" bordercolor="#000000" >

<tr>

<td height="40" colspan="2" valign="top" align="left" bgcolor = "#999999">11</td>

<td width="60" valign="bottom" align="right" bgcolor = "#ffffff">13</td>

</tr>

<tr>

<td height="40" width="60" valign="top" align="left" bgcolor ="#999999">21</td>

<td width="60" valign="middle" align="center" bgcolor = "#ffffff">22</td>

<td width="60" valign="bottom" align="right" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

Відповідна таблиця подана на рис. 11.

12. Використання параметрів cellspacing та cellspadding.

12.1. Встановимо відстань між комірками таблиці, поданої на рис. 11, рівною 0 пікселів (це білий простір між комірками таблиці). Реалізуємо це за допомогою параметра cellspacing. Записуємо необхідний HTML-код:

…

<table border="3" bordercolor="#000000" cellspacing="0" >

<tr>

<td height="40" colspan="2" valign="top" align="left" bgcolor = "#999999">11</td>

<td width="60" valign="bottom" align="right" bgcolor = "#ffffff">13</td>

</tr>

<tr>

<td height="40" width="60" valign="top" align="left" bgcolor ="#999999">21</td>

<td width="60" valign="middle" align="center" bgcolor = "#ffffff">22</td>

<td width="60" valign="bottom" align="right" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

Відповідна таблиця показана на рис. 12.

12.2. Змінимо значення параметра cellspacing з 0 на 7. Нова таблиця показана на рис. 13.

12.3. Розглянемо наслідки використання параметра cellpadding, що визначає відстань між границями комірок і даними, що знаходяться у цих комірках. Для наочності результатів спочатку за допомогою параметра valing вирівняємо зміст комірок верхнього ряду доверху, а нижнього ― донизу:

...

<table border="3" bordercolor="#000000" cellpadding="0" >

<tr>

<td height="40" colspan="2" valign="top" align="left" bgcolor = "#999999">11</td>

<td width="60" valign="top" align="right" bgcolor = "#ffffff">13</td>

</tr>

<tr>

<td height="40" width="60" valign="bottom" align="left" bgcolor ="#999999">21</td>

<td width="60" valign="bottom" align="center" bgcolor = "#ffffff">22</td>

<td width="60" valign="bottom" align="right" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

Відповідна таблиця показана на рис. 14.

Змінимо значення параметра cellpaddingз 0 на 7. Нова таблиця подана на рис. 15.

13. Визначимо фоновий рисунок таблиці. Реалізуємо це за допомогою параметра background. HTML-код при цьому буде таким:

…

<table height = "200" width = "200" background="Zamok.jpg">

<tr>

<td></td><td>Замок</td><td></td>

</tr>

<tr>

<td></td><td></td><td></td>

</tr>

</table>

</body>

14. Вкладені таблиці. Створимо таблицю, яка складається з одного ряду та трьох комірок. У третю комірку додамо ще одну таблицю, яка складається з чотирьох рядків та двох стовпчиків. HTML- код для такої таблиці такий:

…

<table align="center">

<tr height="200">

<td width="200" valign="top" background="Zamok.jpg" align="center"> <h1><br><br>ЗВІТ</h1></td>

<td width="50" background="Tochka.jpg"></td>

<td width="300" valing="top" background="Yellow.jpg" align="center">

<h3>Таблиця, яка показує успішність групи ОА-Д-2:</h3>

<table cellspasing="3" border="3" bordercoler="black"

background="Yellow.jpg">

<tr height="40">

<td width="200" align="center"> п'ятірок </td>

<td width="100" align="center">10%</td>

</tr>

<tr height="40">

<td width="200" align="center" >четвірок </td>

<td width="100" align="center" >70% </td>

</tr>

<tr height="40">

<td width="200" align="center">трійок </td>

<td width="100" align="center" >20% </td>

</tr>

<tr height="40">

<td width="200" align="center">двійок </td>

<td width="100" align="center" >немає </td>

</tr>

</table>

<br> <h3>Викладач</h3>

</td>

</tr>

</table>

</body>

Переглянемо цю таблицю у браузері (рис. 17).

Завдання для самостійної роботи

1. У HTML-документі визначити таблицю, зміст та форматування якої відповідають таблиці, поданої на рис.18.

2. Оформити звіт.

Питання для самоперевірки

Навіщо використовуються таблиці?
Як визначити кількість рядків у таблиці?
Як визначити кількість стовпчиків у таблиці?
Як визначити горизонтальне вирівнювання змісту комірок таблиці?
Чи можна визначити вертикальне вирівнювання змісту рядків таблиці?
Чи можна визначити ширину окремої комірки таблиці?
Як визначити ширину таблиці?
Чи можна визначити висоту таблиці?
Як встановити відстань між комірками таблиці?
Як встановити товщину границь таблиці?

З повагою ІЦ “KURSOVIKS”!