<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: итоговая таблица</title>
</head>
<body>
<h1>Итоговая таблица</h1>
<table>
<tr class="darkcyan">
<th class="pl">Город</th>
<th class="two">Посещений</th>
<th class="three">%</th>
</tr>
<tr>
<td class="pl">СПб</td>
<td class="two">199</td>
<td class="three">65.12</td>
</tr>
<tr class="lightyellow">
<td class="pl">Москва</td>
<td class="two">69</td>
<td class="three">21.3</td>
</tr>
<tr>
<td class="pl">Киев</td>
<td class="two">5</td>
<td class="three">8</td>
</tr>
<tr class="lightyellow">
<td colspan="2" class="pl">Посещений за весь период</td>
<td class="three">273</td>
</tr>
</table>
</body>
</html>`
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse ;
}
th {
width: 30%;
height: 35px;
border-bottom: solid lightgray 1px;
}
td {
height: 35px;
border-bottom: solid lightgrey 1px;
}
.two {
text-align: center;
}
.three {
text-align: right;
padding-right: 10px;
}
.lightyellow {
background: lightyellow;
}
.darkcyan {
background: darkcyan;
color: #fff;
border: solid 1px;
border-color: black;
border-left: none;
border-right: none;
}
.darkcyan .two {
background: lightblue;
}
.pl {
padding-left: 10px;
}
.darkcyan th {
border-bottom: none;
}
.darkcyan .pl {
text-align: left;
}
Чтобы в вашем скрине был какой-то смысл, картинки должны быть разными. А здесь получается, что вы демонстрируете дважды свой результат.
Размеры ячеек определяются отступами в этом задании, высоту задавать не надо.
HTML-код не вижу, чтобы можно было сказать больше.
Нет, это ваш вариант и… ваш вариант. Вкладка образца левее.
Отступы сверху и снизу составляют высоту ячейки.
Код форматируется с помощью кнопки </>
, то есть вы выделяете весь код в сообщении и нажимаете эту кнопку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: итоговая таблица</title>
</head>
<body>
<h1>Итоговая таблица</h1>
<table>
<tr class="darkcyan">
<th class="pl">Город</th>
<th class="two">Посещений</th>
<th class="three">%</th>
</tr>
<tr>
<td class="pl">СПб</td>
<td class="two">199</td>
<td class="three">65.12</td>
</tr>
<tr class="lightyellow">
<td class="pl">Москва</td>
<td class="two">69</td>
<td class="three">21.3</td>
</tr>
<tr>
<td class="pl">Киев</td>
<td class="two">5</td>
<td class="three">8</td>
</tr>
<tr class="lightyellow">
<td colspan="2" class="pl">Посещений за весь период</td>
<td class="three">273</td>
</tr>
</table>
</body>
</html>
Если принять общую ширину таблицы как 100%, то ваша получается только 90% (30%*3).
По поводу высоты уже говорила.
странное дело. Если я ставлю значение 33% вместо 30% , то таблица уменьшается в длину. Видно визуально даже.
Да, потому что у Вас не выставлены паддинги. Поэтому она уменьшается. @Ineska Вам уже ДВАЖДЫ дала совет ЛИКВИДИРОВАТЬ высоты в th и td и задать их с помощью паддингов. Изменив всего лишь одно свойство в двух соседних правилах CSS (само собой, задав 33% ширины) у Вас тут же получится 100%.