13.06.2025
Тема уроку: Розмітка
веб-сторінок за допомогою таблиць
<!DOCTYPE html>
<html lang="uk">
<head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Інформаційна
Сторінка</title>
<style> body {
font-family: Arial, sans-serif;
background-color: #f4f8fb;
color: #333;
margin: 0;
padding: 0;}
header {
background-color: #007acc;
color: white;
padding: 20px 0;
text-align: center;
}
nav {
background-color: #e0e0e0;
padding: 10px;
text-align: center;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #007acc;
font-weight: bold;
}
main {
padding: 20px;
}
h1 {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #007acc;
color: white;
}
footer {
background-color: #007acc;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>Структура та Розміщення
Інформації на Веб-сторінці</h1>
</header>
<nav>
<a
href="#">Головна</a>
<a href="#">Про
нас</a>
<a
href="#">Контакти</a>
</nav>
<main>
<section>
<h2>Використання Таблиць для Розміщення Даних</h2>
<p>Нижче подано приклад таблиці, яка відображає список студентів і їх
результати:</p>
<table>
<thead>
<tr>
<th>№</th>
<th>Ім'я</th>
<th>Прізвище</th>
<th>Оцінка</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Олег</td>
<td>Шевченко</td>
<td>95</td>
</tr>
<tr>
<td>2</td>
<td>Марія</td>
<td>Коваль</td>
<td>88</td>
</tr>
<tr>
<td>3</td>
<td>Іван</td>
<td>Петренко</td>
<td>91</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
© 2025 Навчальний сайт.
Усі права захищено.
</footer>
</body>
</html>