Кольорові стовпці в таблиці
Створіть таблицю, яку показано на малюнку 1. Дотримуйтеся наступних умов:
- валідний строгий XHTML-код;
- валідний CSS3;
- заборонено додавати ідентифікатори та класи до тегів всередині таблиці;
- вміст третього стовпця вирівнюється за центром.
Мал. 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Камені</title>
<style>
.jewel {
width: 100%; /* Ширина таблиці */
border: 1px solid #000; /* Рамка навколо таблиці */
border-collapse: collapse;
}
.jewel th {
background: #666;
color: #fff;
}
.jewel td, .jewel th {
padding: 3px; /* Поля навколо тексту */
text-align: left; /* Вирівнювання по лівому краю */
border: 1px solid #000;
}
.jewel td:nth-child(odd) {
background: #7cded5;
}
.jewel td:nth-child(even) {
background: #fffd7a;
}
.jewel td:nth-child(3) {
text-align: center; /* Вирівнювання за центром */
}
</style>
</head>
<body>
<table class="jewel">
<tr>
<th>Назва</th><th>Колір</th><th>Твердість за Моосом</th>
<th>Формула</th>
</tr>
<tr>
<td>Діамант</td><td>Білий</td><td>10</td><td>C</td>
</tr>
<tr>
<td>Рубін</td><td>Червоний</td><td>9</td>
<td>Al<sub>2</sub>O<sub>3</sub></td>
</tr>
<tr>
<td>Аметист</td><td>Блакитний</td><td>7</td>
<td>SiO<sub>2</sub></td>
</tr>
<tr>
<td>Ізумруд</td><td>Зелений</td><td>8</td>
<td>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></td>
</tr>
<tr>
<td>Сапфір</td><td>Блакитний</td><td>9</td>
<td>Al<sub>2</sub>O<sub>3</sub></td>
</tr>
</table>
</body>
</html>