Используя следующий код HTML, стилизуйте таблицу, чтобы получить результат, показанный на рис. 1.
<table class="table">
<thead>
<tr><th>Знак зодиака</th><th>Стихия</th><th>Даты</th></tr>
</thead>
<tbody>
<tr><td>Овен</td><td>Огонь</td><td>21 марта – 19 апреля</td></tr>
<tr><td>Телец</td><td>Земля</td><td>20 апреля – 20 мая</td></tr>
<tr><td>Близнецы</td><td>Воздух</td><td>21 мая – 20 июня</td></tr>
<tr><td>Рак</td><td>Вода</td><td>21 июня – 22 июля</td></tr>
<tr><td>Лев</td><td>Огонь</td><td>23 июля – 22 августа</td></tr>
<tr><td>Дева</td><td>Земля</td><td>23 августа – 22 сентября</td></tr>
<tr><td>Весы</td><td>Воздух</td><td>23 сентября – 22 октября</td></tr>
<tr><td>Скорпион</td><td>Вода</td><td>23 октября – 21 ноября</td></tr>
<tr><td>Стрелец</td><td>Огонь</td><td>22 ноября – 21 декабря</td></tr>
<tr><td>Козерог</td><td>Земля</td><td>22 декабря – 19 января</td></tr>
<tr><td>Водолей</td><td>Воздух</td><td>20 января – 18 февраля</td></tr>
<tr><td>Рыбы</td><td>Вода</td><td>19 февраля – 20 марта</td></tr>
</tbody>
</table>
Рис. 1
Обратите внимание, что при наведении на строку меняется её цвет фона.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Таблица</title>
<style>
.table {
width: 100%;
border-spacing: 0 10px;
font-family: Arial, Helvetica, sans-serif;
color: #2b2b2b;
}
.table th, .table td {
padding: 0.5em;
}
.table th {
text-align: left;
font-weight: normal;
}
.table thead tr {
background-color: #f2f4f5;
}
.table tr {
outline: 1px solid #ebebeb;
border-radius: 5px;
}
table tbody tr:hover {
background-color: #edf1f4;
}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Знак зодиака</th>
<th>Стихия</th>
<th>Даты</th>
</tr>
</thead>
<tbody>
<tr>
<td>Овен</td>
<td>Огонь</td>
<td>21 марта – 19 апреля</td>
</tr>
<tr>
<td>Телец</td>
<td>Земля</td>
<td>20 апреля – 20 мая</td>
</tr>
<tr>
<td>Близнецы</td>
<td>Воздух</td>
<td>21 мая – 20 июня</td>
</tr>
<tr>
<td>Рак</td>
<td>Вода</td>
<td>21 июня – 22 июля</td>
</tr>
<tr>
<td>Лев</td>
<td>Огонь</td>
<td>23 июля – 22 августа</td>
</tr>
<tr>
<td>Дева</td>
<td>Земля</td>
<td>23 августа – 22 сентября</td>
</tr>
<tr>
<td>Весы</td>
<td>Воздух</td>
<td>23 сентября – 22 октября</td>
</tr>
<tr>
<td>Скорпион</td>
<td>Вода</td>
<td>23 октября – 21 ноября</td>
</tr>
<tr>
<td>Стрелец</td>
<td>Огонь</td>
<td>22 ноября – 21 декабря</td>
</tr>
<tr>
<td>Козерог</td>
<td>Земля</td>
<td>22 декабря – 19 января</td>
</tr>
<tr>
<td>Водолей</td>
<td>Воздух</td>
<td>20 января – 18 февраля</td>
</tr>
<tr>
<td>Рыбы</td>
<td>Вода</td>
<td>19 февраля – 20 марта</td>
</tr>
</tbody>
</table>
</body>
</html>