Неделя 3
На этой неделе вы узнаете, как создать таблицу на HTML. Вы также будете выпускать расписание занятий в том же расписании.
Создание таблицы HTML
Таблицы в формате HTML выводят на экран данные с помощью строк и столбцов. В них может содержаться как обычный текст, так и изображения или видео.
Элемент table представляет собой тэг-контейнер, в котором размещается содержимое таблицы. Таблица строится по строкам: для обозначения строки используется контейнер tr, для обозначения заголовков столбцов (строк) – контейнер th, а для данных в ячейках – контейнер td. Заголовки выделяются полужирным шрифтом и центрируются в своих ячейках. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки.
- <col> – тег колонки таблицы;
- <colgroup> – тег группы колонок таблицы;
- <thead> – тег верхнего колонтитула таблицы;
- <tbody> – тег основной части таблицы;
- <tfoot> – тег нижнего колонтитула таблицы;
- <caption> – тег подписи таблицы.
- <border > – тег границ таблицы.
- pading — устанавливает ширину рамки таблицы в пикселях.
- height – определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера. Может также использоваться дня отдельной ячейки.
Практическая часть
Лабораторная работа №1.
Составление таблицы для расписания занятий
Шаг 1.создайте файл rasp.HTML в блокноте в отдельной папке.
Шаг 2.Введите код в файл rasp.HTML.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Расписание занятий</title>
<body>
<div>
<h1>Расписание занятий</h1>
</div>
<table bgcolor="#000000" cellspacing="0" class="table">
<tr class="th_a">
<th colspan="7"></th>
</tr>
<tr bgcolor="#0000ff">
<th width="40">№</th>
<th width="70">Time</th>
<th width= "100">Понедельник</th>
<th width= "100">Вторник</th>
<th width= "100">Среда</th>
<th width= "100">Четверг</th>
<th width= "100">Пятница</th>
</tr>
<tr class="th_c">
<th colspan="7"></th>
</tr>
<tr bgcolor="#ffffff">
<td>1</td>
<td> <br/> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td>2</td>
<td> <br/> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td>3</td>
<td> <br/> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td>4</td>
<td> <br/> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td>5</td>
<td> <br/> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td>6</td>
<td> <br/> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</head>
<style>
.table th {
color:#ffffff;
padding: 3;
vertical-align: top;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
.table td {
padding: 3;
vertical-align: top;
height: 80;
border-bottom: 2px dashed #000000;
}
.table th, .table td {
border-left: 2px solid #000000;
}
.table th:last-child, .table td:last-child {
border-right: 2px solid #000000;
}
.table td:first-child {
font-weight: bold;
}
.table tr:last-of-type > td {
border-bottom: 2px solid #000000;
}
.table .th_a > th {
height: 0;
padding: 2;
background-color:#ffffff;
border-bottom: 0px solid #000000;
}
.table .th_c > th {
height: 0;
padding: 2;
background-color:#ffffff;
border-top: 0px solid #000000;
}
</style>
</html>
Шаг 3.Обновите и просмотрите изменения в браузере.
Шаг 4.Проанализируйте HTML-код, глядя на результат, который появляется в браузере.
Лабораторная работа №2.
Расписание занятий
Шаг 1.Откройте текст веб-страницы rasp.HTML в блокноте в папке.
Шаг 2. Внесите изменения в файл rasp.HTML.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Расписание занятий</title>
<body>
<div>
<h1>Расписание занятий</h1>
</div>
<table bgcolor="#000000" cellspacing="0" class="table">
<tr class="th_a">
<th colspan="7"></th>
</tr>
<tr bgcolor="#0000ff">
<th width="40">№</th>
<th width="70">Время</th>
<th width= "100">Понедельник</th>
<th width= "100">Вторник</th>
<th width= "100">Среда</th>
<th width= "100">Четверг</th>
<th width= "100">Пятница</th>
</tr>
<tr class="th_c">
<th colspan="7"></th>
</tr>
<tr bgcolor="#ffffff">
<td>1</td>
<td>8:00 <br/>8:40 </td>
<td>Казахский язык </td>
<td>Математика </td>
<td>English</td>
<td>Казахский язык </td>
<td>История Казахстана </td>
</tr>
<tr bgcolor="#ffffff">
<td>2</td>
<td>8:45 <br/>9:25 </td>
<td> Казахская литература </td>
<td>Информатика </td>
<td>Казахский язык </td>
<td> Русская литература </td>
<td> Русский язык </td>
</tr>
<tr bgcolor="#ffffff">
<td>3</td>
<td>9:30 <br/>10:10 </td>
<td>Естествознание </td>
<td>Казахская литература </td>
<td>Математика </td>
<td>English </td>
<td>Информатика </td>
</tr>
<tr bgcolor="#ffffff">
<td>4</td>
<td>10:15 <br/>10:55 </td>
<td>Музыка </td>
<td>История Казахстана </td>
<td>Физическая культура</td>
<td>Естествознание </td>
<td>Математика </td>
</tr>
<tr bgcolor="#ffffff">
<td>5</td>
<td>11:05 <br/>11:45 </td>
<td>Всемирная история </td>
<td> </td>
<td>Физическая культура </td>
<td>Трудовое обучение</td>
<td>Рисование (ИЗО)</td>
</tr>
<tr bgcolor="#ffffff">
<td>6</td>
<td>11:50 <br/>12:30 </td>
<td> </td>
<td> </td>
<td> </td>
<td>Трудовое обучение </td>
<td> </td>
</tr>
</table>
</body>
</head>
<style>
.table th {
color:#ffffff;
padding: 3;
vertical-align: top;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
.table td {
padding: 3;
vertical-align: top;
height: 80;
border-bottom: 2px dashed #000000;
}
.table th, .table td {
border-left: 2px solid #000000;
}
.table th:last-child, .table td:last-child {
border-right: 2px solid #000000;
}
.table td:first-child {
font-weight: bold;
}
.table tr:last-of-type > td {
border-bottom: 2px solid #000000;
}
.table .th_a > th {
height: 0;
padding: 2;
background-color:#ffffff;
border-bottom: 0px solid #000000;
}
.table .th_c > th {
height: 0;
padding: 2;
background-color:#ffffff;
border-top: 0px solid #000000;
}
</style>
</html>
Шаг 3.Откройте rasp.HTML из браузера.
Шаг 4. Проанализируйте HTML-код, глядя на результат, который появляется в браузере.