ПР№3 Пайчук

Лабораторна робота №3
Таблиці в HTML. Таблична верстка сайтів

Мета: вивчити основні теги HTML для представлення табличних даних.
Програмне забезпечення: операційна система Windows 7/8/10, текстовий
редактор Brackets, веб-браузер Chrome, розширення Window Raizer.
Хід роботи:
Завдання №1.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8">
<meta name="author" content="Paichuk Serhii">
<title>Таблична сторінка</title>
</head>
<body>
<table cols="3" border="3px"; bordercolor="blue"; align="center"; width="600px";
cellspacing="0px"; cellpadding="5px"; bordercollapse="collapse">
<caption>Заголовок таблиці</caption>
<thead>
<tr>
<th colspan="3"; height="40px"; bgcolor="#ccffcc">Верхній колонтитул</th>
</tr>
</thead>
<tbody >
<colgroup bgcolor="#dada99">
<colgroup bgcolor="#b8b8ff">
<colgroup bgcolor="#7d7ddd">
<tr>
<th height="50px">Заголовок стовця 1</th>
</tr>
<tr height="60">
<td style="vertical-align: top; text-align:left;">Комірка даних 1 рядка 1</td>
<td style="vertical-align: top; text-align:center;">Комірка даних 2 рядка 1</td>
<td style="vertical-align: top; text-align:right;">Комірка даних 3 рядка 1</td>
</tr>
<tr height="60">
<td style="vertical-align: bottom; text-align: left;">Комірка даних 1 рядка 2</td>
<td style="vertical-align: bottom; text-align:center;">Комірка даних 2 рядка 2</td>
<td style="vertical-align: bottom; text-align:right;">Комірка даних 3 рядка 2</td>
</tr>
<tr height="60">
<td rowspan="2">Об'днання комірок</td>
<td colspan="2">Об'днання комірок</td>
</tr>
<tr height="60">
<td colspan="2">Об'днання комірок</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3"; height="40px"; bgcolor="#ccffcc">Нижні колонтитул</th>
</tr>
</tfoot>
</table>
</body>
</html>
Завдання №2.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8">
<meta name="viewport" content="width=device-width, initil-scale=1.0">
<meta name="author" content="Paichuk Serhii">
<title>Таблиця завдання 3</title>
<style type="text/css">
body{
width: 960px;
background: lightcoral;
}
.zagolovok{
}
td{
border-right: 3px solid darkolivegreen;
}
</style>
</head>
<body>
<img src="images/1.png", align="left" width="80px"; height="80px" style="margin-left: 6em;">
<br>
<p style="margin-left: 5em; margin-top: -1em;">Студія
<br>широкоформатного<br>друку</p>
<br>
<p style="margin-top: -5em; margin-right: 7em;" align="right">м. Сміла, вул. Незалежності,
10<br> тел.: +38 (099)55-33-455<br> E-mail: print@ukr.com.ua</p>
<br>
<table cols="6"; align="center"; width="720px"; cellspacing="0px"; cellpadding="5px";
bordercollapse="collapse">
<caption style="font-size: 20px;">ПРАЙС-ЛИСТ</caption>
<thead>
<tr>
<th colspan="6"; height="10px"; style="font-size: 14px;">ШИРОКОФОРМАТНИЙ ДРУК</th>
</tr>
</thead>
<tbody>
<tr style="background: darkseagreen; color: white;">
<th height="10px" width="220px">Матеріал, плетіння ниток</th>
<th height="10px"; width="80px">360 dpi, грн./m<sup>2</sup></th>
<th height="10px"; width="80px">720S dpi, грн./m<sup>2</sup></th>
<th height="10px"; width="80px">770H dpi, грн./m<sup>2</sup></th>
<th height="10px"; width="80px">1440 dpi, грн./m<sup>2</sup></th>
<th height="10px"; width="80px">Чистий матеріал, грн./m<sup>2</sup></th>
</tr>
<tr style ="background: white; text-align: center;">
<td style="text-align: left;">1.<b> Банер 340 г/м<sup>2</sup></b></td>
<td>40</td>
<td>45</td>
<td></td>
<td></td>
<td style="border-right: 0px">15</td>
</tr>
<tr style ="background: silver; text-align: center;">
<td></td>
<td></td>
<td>55</td>
<td>62</td>
</tr>
<td>48</td>
<td>52</td>
<td></td>
<td></td>
</tr>
<td>55</td>
<td>60</td>
<td>62</td>
<td>74</td>
</tr><tr style ="background: white; text-align: center;">
<td style="text-align: left;">5.<b> Банер 500 г/м<sup>2</sup></b><br>(для світлових коробів)</td>
<td>60</td>
<td>65</td>
<td>68</td>
<td>80</td>
</tr>
<td style="text-align: left;">6.<b> Сітка 340 г/м<sup>2</sup></b></td>
<td>55</td>
<td>60</td>
<td>65</td>
<td>75</td>
<td style="text-align: left;">7.<b> Самоклеюча плівка</b></td>
<td>58</td>
<td colspan="2">66</td>
<td>72</td>
</tr>
<td style="text-align: left;">8.<b> Перфорована самоклеюча плівка</b></td>
<td>79</td>
<td>89</td>
<td>94</td>
<td>105</td>
<td style="text-align: left;">9.<b> Поліестер</b></td>
<td>70</td>
<td colspan="2">75</td>
<td>100</td>
</tr>
<td style="text-align: left;">10.<b>Папір 150 г/м<sup>2</sup></b></td>
<td>36</td>
<td>40</td>
<td>45</td>
<td>80</td>
<td style="text-align: left;">11.<b> Папір 115 г/м<sup>2</sup></b></td>
<td>28</td>
<td>35</td>
<td>40</td>
<td>75</td>
</tr>
<td style="text-align: left;">12.<b> Фотопапір 220 г/м<sup>2</sup></b></td>
<td></td>
<td></td>
<td>65</td>
<td>75</td>
<td style="text-align: left;">13.<b> Полотно 350 г/м<sup>2</sup></b></td>
<td></td>
<td></td>
<td>140</td>
<td>160</td>
</tr>
<td colspan="6"; style="text-align: center; border-right: 0px"> Післяобробка</td>
</tr>
<td style="text-align: left;"> <b>Ламінація 105, 126, 137, 160 см</b></td>
<td colspan="4"> 60</td>
</tr>
<td style="text-align: left;"> <b>Склеювання</b></td>
<td colspan="5" style="border-right: 0px"> 25 грн./погонний метр</td>
</tr>
<td style="text-align: left;"> <b>Люверси 10 мм</b></td>
<td colspan="5" style="border-right: 0px"> 4 грн./шт.</td>
</tr>
<td colspan="6"; style="text-align: center; border-right: 0px"> Ширина друкованих
матеріалів</td>
</tr>
<td colspan="2" style="font-size: 14px;">Банер 340 - 110, 137, 160, 220,250, 320см</td>
<td colspan="4" style="font-size: 14px; border-right: 0px "> Банер 440 - 160 см</td>
</tr>
<td colspan="2" style="font-size: 14px;">Банер 500, 510 - 160, 320см</td>
<td colspan="4" style="font-size: 14px; border-right: 0px"> Сітка - 320 см</td>
</tr>
<td colspan="2" style="font-size: 14px;">Плівка - 105, 126, 137, 152, 160 см</td>
<td colspan="4" style="font-size: 14px; border-right: 0px"> Перфорована плівка - 137, 152
см</td>
</tr>
<td colspan="2" style="font-size: 14px;">Папір - 126, 160 см</td>
<td colspan="4" style="font-size: 14px; border-right: 0px"> Поліестер, фотобумага, холст - 152
см</td>
</tr>
</tbody>
</table>
</body>
</html>
Результат:
Контрольні питання:
1. Опишіть семантичну структуру таблиці.
Семантична структура таблиці: Таблиця в HTML складається з рядків
<tr>, комірок <td> або заголовкових комірок <th>, а також заголовка таблиці
<caption>, колонок <colgroup> та рядків заголовків <thead>, рядків
підзаголовків <tbody>, і т. д. Семантична структура допомагає визначити
заголовки, дані та інші частини таблиці.
2. Назвіть загальні атрибути форматування таблиці.
Загальні атрибути форматування таблиці: Деякі загальні атрибути для
форматування таблиці включають border для встановлення ширини границі,
cellpadding і cellspacing для задання відступів між комірками, width для
встановлення ширини таблиці, align для вирівнювання таблиці відносно
сторінки, і bgcolor для задання кольору фону таблиці.
3. Які існують способи вирівнювання тексту у комірках?
Способи вирівнювання тексту у комірках: Текст у комірках таблиці може
бути вирівняний горизонтально та вертикально. Для горизонтального
вирівнювання використовують властивості CSS text-align (left, center, right)
для комірок або стовпців. Для вертикального вирівнювання використовують
vertical-align (top, middle, bottom).
4. Як об’єднати кілька комірок у рядку та стовпці?
Об'єднання комірок у рядку та стовпці: Для об'єднання комірок у рядку
використовується атрибут colspan, який вказує, скільки стовпців
об'єднуються. Для об'єднання комірок у стовпці використовується атрибут
rowspan, який вказує, скільки рядків об'єднуються.
5. Що таке таблична верстка?
Об'єднання комірок у рядку та стовпці: Для об'єднання комірок у рядку
використовується атрибут colspan, який вказує, скільки стовпців
об'єднуються. Для об'єднання комірок у стовпці використовується атрибут
rowspan, який вказує, скільки рядків об'єднуються.
6. Які переваги та недоліки табличної верстки?
Переваги та недоліки табличної верстки:
Переваги:
 Простота для створення складних макетів.
 Підтримка старих браузерів, які можуть мавплювати з CSS.
Недоліки:
 Не дотримання семантики, що робить сайт менш доступним для
асистивних технологій та пошукових систем.
 Погана масштабованість та адаптивність до різних розмірів екранів.
 Збільшення обсягу HTML-коду та ускладнення обслуговування.
Сучасні веб-розробники часто використовують CSS для макету сторінки
через його більшу гнучкість, доступність та підтримку адаптивного дизайну.

ПР№3 Пайчук

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ПР№3 Пайчук

Uploaded by

Copyright:

Available Formats

Лабораторна робота №3

Таблиці в HTML. Таблична верстка сайтів

You might also like