МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ
РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное бюджетное образовательное учреждение
высшего образования
«Воронежский государственный лесотехнический университет имени
Г.Ф.Морозова»
(ФГБОУ ВО «ВГЛТУ им. Г.Ф. Морозова»)
ЛАБОРАТОРНАЯ РАБОТА № 4
по дисциплине Работа в системе управления контентом
тема: Создание и оформление таблиц
Расчетно-пояснительная записка
Разработал (а)
ОИС2-235-ОП Д. Д. Севастьянов
(Подпись, дата)
(группа, И.О., Фамилия)
Руководитель
А.Г. Абрасимовская
(Подпись, дата)
(И.О., Фамилия)
Оценка
Воронеж 2024
Цель лабораторной работы: научиться создавать и оформлять таблицы.
Задание 1. Наберите с помощью программы «Блокнот» следующий
программный код. Сохраните его и просмотрите результат в браузере.*
Рисунок 1 - Результат работы кода*
<НТМL>
<HEAD><ТIТLЕ>Таблицы</ТIТLЕ></HEAD> <BODY>
<H1 ALIGN=CENTER>Coздание таблиц</Н1>
<TABLE BORDER=1>
<TR><TH>Наименование
</TH><TH>Описание</TH><TH>Цена</TH></TR>
<TR><TD>Mini Tower</TD><TD>ATX 230 Вт
SM30</TD><TD>30</TD></TR>
<TR><TD>Midi Tower</TD><TD> ATX 230 Вт
GM30</TD><TD>33</TD></TR>
<TR><TD>Midi Tower</TD><TD> ATX 300 Вт GM30
TUV</TD><TD>33</TD></TR>
</TABLE>
</BODY>
2
</HTML>
Задание 2. Наберите с помощью программы «Блокнот» следующий
программный код. Сохраните его и просмотрите результат в браузере.*
Рисунок 2 - Результат работы кода*
<НТМL>
<HEAD><ТIТLЕ>Таблицы</ТIТLЕ></HEAD>
<BODY>
<H1 ALIGN=CENTER>Объединение ячеек</Н1>
<TABLE BORDER=1>
<TR BGCOLOR=”RED”>
16
<TH>Наименование</TH><TH>Описание</TH><TH>Цена</TH>
</TR>
<TR>
<TD>Ячейка 1</TD><TD>Ячейка 2</TD><TD>Ячейка 3</TD>
</TR>
<TR BGCOLOR=”GREEN”>
<TD>Ячейка 4</TD><TD COLSPAN=2> Ячейка 5</TD> </TR>
3
</TABLE>
</BODY>
</HTML>
Задание 3. Нарисуйте отображение HTML-кода браузером*:
Рисунок 3 - Результат работы кода*
<TABLE>
<TR>
<TD>Фамилия</TD><TD>Адрес</TD><TD>Телефон</TD></TR>
<TR>
<TD>Иванов</TD><TD>Ленина, 8</TD><TD>5554473</TD></TR>
<TR>
<TD>Петров</TD><TD>Суворова, 12</TD><TD>1234532</TD></TR>
</TABLE>
4
Задание 4. Создайте HTML-документ по образцу.*
Рисунок 4 - Результат работы кода*
<html>
<head>
<title>4</title>
<style>
.st0 {
text-align:center;
}
.st1 {
font-weight:bold;
text-align:center;
height:70px;
}
</style>
</head>
5
<body>
<TABLE border="1" align="center">
<TR>
<TD colspan="3" class="st0"><font color="blue"><b>Данные по
расходу электроэнергии</b></font></TD>
</TR>
<TR class="st1">
<TD width="180">Месяц</TD>
<TD width="180">Показания счетчика, кВт</TD>
<TD width="180">Оплата за месяц, руб</TD>
</TR>
<TR>
<TD>Март</TD>
<TD class="st0">1900</TD>
<TD class="st0">20500</TD>
</TR>
<TR>
<TD>Апрель</TD>
<TD class="st0">2476</TD>
<TD class="st0">15800</TD>
</TR>
<TR>
6
<TD>Май</TD>
<TD class="st0">3263</TD>
<TD class="st0">30100</TD>
</TR>
</TABLE>
</body>
</html>
7
Задание 5. Создайте HTML-документ по образцу.*
Рисунок 5 - Результат работы кода*
<html>
<head>
<title>4</title>
<style>
.st0 {
text-align: center;
color: orangered;
font-weight: bold;
8
padding-bottom: 10px;
}
.st1 {
text-align: center;
font-weight: bold;
padding-bottom: 10px;
background-color: #b4e2b6;
}
.st2 {
text-align: left;
padding-bottom: 30px;
background-color: #ffc6aa;
font-family:'Times New Roman';
height:10px
}
.st3 {
text-align: left;
padding-bottom: 15px;
font-family: 'Times New Roman';
}
.st3a {
text-align: left;
9
padding-bottom: 30px;
font-family: 'Times New Roman';
}
</style>
</head>
<body>
<TABLE border="1" align="center">
<TR>
<TD colspan="7" class="st0" width="500">Данные об участниках
соревнований</TD>
</TR>
<TR class="st1">
<TD width="65">№п.п</TD>
<TD width="70">Фамилия</TD>
<TD width="65">Дата</TD>
<TD width="65">Вес</TD>
<TD width="65">Рост</TD>
<TD width="65">Пол</TD>
<TD>Вид спорта</TD>
</TR>
<TR>
<TD class="st2">1</TD>
10
<TD class="st3">Иванов Иван</TD>
<TD class="st3a">1988</TD>
<TD class="st3a">62</TD>
<TD class="st3a">175</TD>
<TD class="st3a">М</TD>
<TD class="st3a">Футбол</TD>
</TR>
<TR>
<TD class="st2">2</TD>
<TD class="st3">Петров Петр</TD>
<TD class="st3a">1987</TD>
<TD class="st3a">77</TD>
<TD class="st3a">180</TD>
<TD class="st3a">М</TD>
<TD class="st3a">Футбол</TD>
</TR>
<TR>
<TD class="st2">3</TD>
<TD class="st3">Сидорова Ольга</TD>
<TD class="st3a">1988</TD>
<TD class="st3a">57</TD>
<TD class="st3a">162</TD>
11
<TD class="st3a">Ж</TD>
<TD class="st3a">Плавание</TD>
</TR>
<TR>
<TD class="st2">4</TD>
<TD class="st3">Архипова Лена</TD>
<TD class="st3a">1987</TD>
<TD class="st3a">47</TD>
<TD class="st3a">158</TD>
<TD class="st3a">Ж</TD>
<TD class="st3a">Фехтование</TD>
</TR>
<TR>
<TD class="st2">5</TD>
<TD class="st3">Логин Сергей</TD>
<TD class="st3a">1986</TD>
<TD class="st3a">92</TD>
<TD class="st3a">192</TD>
<TD class="st3a">М</TD>
<TD class="st3a">Хоккей</TD>
</TR>
</TABLE>
12
</body>
</html>
Задание 6. Создайте HTML-документ по образцу.*
Рисунок 6 - Результат работы кода*
<html>
<head>
<title>6</title>
<style>
.st0 {
13
text-align: center;
color: darkblue;
font-weight: bold;
padding-bottom:10px;
}
.st1 {
text-align: center;
font-weight: bold;
padding-bottom: 10px;
}
.st01 {
text-align: center;
font-weight: bold;
padding-bottom: 140px;
}
.st2 {
padding:20px;
}
.st3 {
text-align: center;
color: red;
padding-bottom:10px;
14
font-weight: bold;
}
.st4 {
padding-bottom: 10px;
}
.st5 {
text-align: center;
color: darkblue;
font-weight: bold;
}
</style>
</head>
<body>
<p class="st5">Карточка учатника</p>
<table border="1" align="center">
<tr bgcolor="ffe7aa">
<td class="st1" colspan="2" width="250">Код</td>
<td align="center" class="st4" width="250" colspan="2">1</td>
</tr>
<tr bgcolor="ffc6aa">
<td class="st0" colspan="2">Фамилия</td>
<td align="left" colspan="2" class="st4">Иванов Иван</td>
15
</tr>
<tr bgcolor="c3ccff">
<td class="st01" colspan="2">Фото</td>
<td align="center" colspan="2"><IMG SRC=".vs\1.png" ALT="Это
рисунок" class="st2" /></td>
</tr>
<tr class="st3" bgcolor="b4e2b6">
<td height="30">Дата</td>
<td>Вес</td>
<td>Рост</td>
<td>Пол</td>
</tr>
<tr align="center" class="st4" bgcolor="b4e2b6">
<td height="30">1988</td>
<td>62</td>
<td>175</td>
<td>M</td>
</tr>
<tr bgcolor="ffc6aa">
<td class="st0" colspan="2">Вид спорта</td>
<td align="center" colspan="2" class="st4">Футбол</td>
</tr>
16
</table>
</body>
Задание 7. Создайте HTML-документ по образцу.*
Рисунок 7 - Результат работы кода*
<html>
<head>
<title>7</title>
<style>
.st0 {
text-align: center;
background-color: #d1eaf0;
}
td {
17
padding-bottom: 10px;
width: 20%;
}
body {
font-family: 'Times New Roman';
}
.st3 {
text-align: center;
color: red;
font-weight: bold;
background-color: lightsteelblue;
}
.st5 {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<p class="st5">Заявка</p>
18
участие<u><font
<p>на
color="white">___________________________________________________</font>
</u><br
/><i
style="padding-left:20%">(наименование
учебного
заведения)</i></p>
<p>
во втором этапе конкурса по предмету «Прикладная информатика».
Для
участия в конкурсе направляются:
</p>
<table border="1" align="center">
<tbody>
<tr class="st3">
<td>№ п/п</td>
<td>Ф.И.О.</td>
<td>Название команды</td>
<td>Курс</td>
<td>Место в конкурсе</td>
<td>Руководитель команды</td>
</tr>
<tr class="st0">
<td>1</td>
<td></td>
<td></td>
19
<td></td>
<td></td>
<td>
<label>
<input type="checkbox" />
</label>
</td>
</tr>
<tr class="st0">
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<label>
<input type="checkbox" />
</label>
</td>
</tr>
<tr class="st0">
<td>3</td>
20
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<label>
<input type="checkbox" />
</label>
</td>
</tr>
</tbody>
</table>
<p>Директор<u><font
<u><font
color="white">_________________</font></u>
color="white">______________</font></u>
color="white">___</font></u>"<u><font
М.П.<br
/>"<u><font
color="white">_________</font></u>
20<u><font color="white">__</font></u>г.</p>
</body>
</html>
21
Вывод: в ходе работы понял общие принципы работы с таблицами в HTML.
22