Лабораторна робота №6 Створення таблиць
Мета роботи:навчитись створювати таблиці
Хід роботи:
1. Скопіювати в теку HTML видані викладачем графічні файли Zamok.jpg та Tochka.jpg, Yellow.jpg.
2. В теці HTML створити текстовий документ з назвою Table.html, відкрити його за допомогою браузеру та перейти до редагування HTML-коду.
3. Створимо таблицю, яка складається із двох рядків та трьох стовпців та містить текстову інформацію. Структура таблиці показана на рис.1.
Рис. 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>
<td>23</td>
</tr>
</ table>
</body>
</html>
Рис. 2. Відображення таблиці, що складається із двох рядків та трьох стовпців у вікні браузера
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)
Рис. 3. Відображення таблиці із границями товщиною 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>
Рис. 4. Відображення таблиці із сірим кольором фону
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>
Рис. 5. Відображення таблиці із білим та сірим кольором фону для сусідніх комірок
7. Визначимо висоту рядків та ширину стовпців. Створимо таблицю із рядками висотою 40 та стовбцями шириною стовбців 60 пікселів. Ширина стовпців та висота рядків задається за допомогою параметрів width та height відповідно. Записуємо HTML-код для заданої таблиці та переглянемо її у браузері (рис. 6):
…
<table border="3" bordercolor="#000000">
<tr>
<td height = "40" width = "60" bgcolor = "#ffffff">11</td>
<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>
Рис. 6. Відображення таблиці із висотою рядків 40 та шириною стовпців 60 пікселів
8. Визначимо висоту та ширину для всієї таблиці, тоді всі комірки (стовпці) та рядки поділять даний їм простір порівну, якщо не задавати їм особисто цього просторe у відсотках чи пікселях. Записуємо 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>
Рис. 7. Відображення таблиці із висотою 200 та шириною 200 пікселів
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>
Рис. 8. Відображення таблиці із висотою та шириною стовпців, визначених у відсотках до висоти та ширини всієї таблиці
10. Зробимо вертикальне та горизонтальне вирівнювання змісту таблиці. Таблиця, яку необхідно отримати зображена на рис. 9.
Рис. 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>
Рис. 10. Відображення таблиці з виконаним вирівнюванням змісту її комірок у вікні браузера
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.
Рис. 11. Відображення таблиці з об’єднаними у першому рядку першими двома комірками, для яких заданий сірий колір фону.
12. Використання параметрів cellspacing та cellspadding.
- Встановимо відстань між комірками таблиці, представленої на рис. 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. Відображення таблиці, в якої відстань між комірками дорівнює 0 пікселів
- Змінимо значення параметру cellspacing з 0 на 7. Нова таблиця показана на рис. 13.
Рис. 13. Відображення таблиці, в якої відстань між комірками дорівнює 7 пікселів
- Розглянемо наслыдки використання параметру 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.
Рис. 14. Відображення таблиці, для якої параметр cellpadding дорівнює 0 пікселів.
Змінимо значення параметру cellpaddingз 0 на 7. Нова таблиця показана на рис. 15.
Рис. 15. Відображення таблиці, для якої параметр cellpadding дорівнює 7 пікселів.
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>
Рис. 16. Відображення таблиці, для якої визначено параметр background.
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)
Рис. 17. Відображення таблиці, яка складається з одного ряду та трьох комірок та містить вкладену таблицю в третій комірці.
Завдання для самостійної роботи
1. В HTML-документі визначити таблицю, зміст та форматування якої відповідають таблиці показаної на рис.18.
Рис.18. Завдання для визначення таблиці
2. Оформити звіт.
Питання для самоперевірки
1. Навіщо використовуються таблиці?
2. Як визначити кількість рядків у таблиці?
3. Як визначити кількість колонок в таблиці?
4. Як визначити горизонтальне вирівнювання змісту комірок таблиці?
5. Чи можна визначити вертикальне вирівнювання змісту рядків таблиці?
6. Чи можна визначити ширину окремої комірки таблиці?
7. Як визначити ширину таблиці?
8. Чи можна визначити висоту таблиці?
9. Як встановити відстань між комірками таблиці?
10. Як встановити встановити товщину границь таблиці?