<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Таблица животных</title>
<style>
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
text-align: center;
width: 100%;
max-width: 900px;
}
th, td {
border: 1px solid #333;
padding: 10px;
vertical-align: middle;
}
/* Стили для заголовков */
.header-domestic {
background-color: #e0e0e0;
font-weight: bold;
}
.header-wild {
background-color: #d1e7f0;
font-weight: bold;
}
/* Стиль для вертикального текста */
.vertical-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
background-color: #d1e7f0;
font-size: 14px;
padding: 5px;
}
img {
display: block;
margin: 0 auto 5px;
width: 100px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.animal-name {
display: block;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Задание 12: Таблица животных</h2>
<table>
<tr>
<th colspan="2" class="header-domestic">Домашние животные</th>
<th colspan="3" class="header-wild">Дикие животные</th>
</tr>
<tr>
<th class="header-domestic">Могут летать</th>
<th class="header-domestic">Не могут летать</th>
<th class="header-wild">Могут летать</th>
<th class="header-wild">Не могут летать</th>
<th rowspan="3" class="vertical-text">Встречаются на территории нашей страны.</th>
</tr>
<tr>
<td>
<img src="https://cdn.pixabay.com/photo/2016/03/23/15/00/chicken-1274900_640.jpg" alt="Курица">
<span class="animal-name">Курица</span>
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2016/12/13/22/39/rabbit-1905255_640.jpg" alt="Кролик">
<span class="animal-name">Кролик</span>
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2017/01/20/11/52/crow-1994711_640.jpg" alt="Ворона">
<span class="animal-name">Ворона</span>
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2017/12/29/18/18/wolf-3048259_640.jpg" alt="Волк">
<span class="animal-name">Волк</span>
</td>
</tr>
<tr>
<td>
<img src="https://cdn.pixabay.com/photo/2017/07/18/15/39/goose-2516174_640.jpg" alt="Гусь">
<span class="animal-name">Гусь</span>
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2018/06/23/16/22/goat-3492931_640.jpg" alt="Коза">
<span class="animal-name">Коза</span>
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2012/06/19/10/32/owl-50267_640.jpg" alt="Сова">
<span class="animal-name">Сова</span>
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2016/12/05/10/47/fox-1883582_640.jpg" alt="Лиса">
<span class="animal-name">Лиса</span>
</td>
</tr>
</table>
</body>
</html>
