- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Объединяем ячейки в строках</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<caption>Распределение браузеров</caption>
<tr>
<th>Браузер</th>
<th>Посещения</th>
<th class="pink"></th>
</tr>
<tr>
<th></th>
<th>Количество</th>
<th>В процентах</th>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>163</td>
<td>59%</td>
</tr>
<tr>
<td>Google Chrome</td>
<td>78</td>
<td>28%</td>
</tr>
<tr>
<td>Safari</td>
<td>35</td>
<td>13%</td>
</tr>
</table>
</body>
</html>
CSS
table {
border-collapse: separate;
border: 2px solid black;
border-spacing: 4px;
}
td {
padding: 5px;
padding-right: 30px;
border: 1px solid lightgray;
}
th {
padding: 10px;
border: 1px solid black;
}
caption {
margin-bottom: 10px;
font-size: 18px;
}
.pink {
background-color: pink;
}
Вы перешли на другую страницу
ЗадачиВыполнено
0
- Добавьте ячейке с надписью
Посещения
атрибутcolspan="2"
. Обратите внимание, что в таблице добавился лишний столбец. - Затем удалите пустую ячейку с розовым фоном сразу после ячейки
Посещения
. Лишний столбец должен исчезнуть.