Создайте таблицу, как показано на рис. 1.
Рис. 1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Таблица</title>
<style>
.table {
width: 100%;
background-color: #faf4f0;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
}
.table tr:nth-child(even) {
background-color: #ebdec9;
}
.table th, .table td {
padding: 0.5em;
text-align: left;
}
.table th {
background-color: #1c464e;
color: #fff;
}
.table span {
border-radius: 20px;
color: #fff;
padding: 0.2em 1em;
}
.air { background-color: #578A85; }
.fire { background-color: #C04944; }
.earth { background-color: #774925; }
.water { background-color: #0367A6; }
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Знак зодиака</th>
<th>Стихия</th>
<th>Даты</th>
</tr>
</thead>
<tbody>
<tr>
<td>Овен</td>
<td><span class="fire">Огонь</span></td>
<td>21 марта – 19 апреля</td>
</tr>
<tr>
<td>Телец</td>
<td><span class="earth">Земля</span></td>
<td>20 апреля – 20 мая</td>
</tr>
<tr>
<td>Близнецы</td>
<td><span class="air">Воздух</span></td>
<td>21 мая – 20 июня</td>
</tr>
<tr>
<td>Рак</td>
<td><span class="water">Вода</span></td>
<td>21 июня – 22 июля</td>
</tr>
<tr>
<td>Лев</td>
<td><span class="fire">Огонь</span></td>
<td>23 июля – 22 августа</td>
</tr>
<tr>
<td>Дева</td>
<td><span class="earth">Земля</span></td>
<td>23 августа – 22 сентября</td>
</tr>
<tr>
<td>Весы</td>
<td><span class="air">Воздух</span></td>
<td>23 сентября – 22 октября</td>
</tr>
<tr>
<td>Скорпион</td>
<td><span class="water">Вода</span></td>
<td>23 октября – 21 ноября</td>
</tr>
<tr>
<td>Стрелец</td>
<td><span class="fire">Огонь</span></td>
<td>22 ноября – 21 декабря</td>
</tr>
<tr>
<td>Козерог</td>
<td><span class="earth">Земля</span></td>
<td>22 декабря – 19 января</td>
</tr>
<tr>
<td>Водолей</td>
<td><span class="air">Воздух</span></td>
<td>20 января – 18 февраля</td>
</tr>
<tr>
<td>Рыбы</td>
<td><span class="water">Вода</span></td>
<td>19 февраля – 20 марта</td>
</tr>
</tbody>
</table>
</body>
</html>