Добрый день, подскажите пожалуйста, как можно усовершенствовать данные html и css для лучшей читабильности ( семантики ). Испытание выполнено на 100%, по своим ощущениям, думаю что многое написано правильно.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: итоговая таблица</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Итоговая таблица</h1>
<table cellpadding="10">
<tr class="color">
<th class="left" style="width: 33.3%;">Город</th>
<th style="background-color: lightblue; text-align: centr; width: 33.3%;">Посещений</th>
<th style="text-align: right; width: 33.3%;">%</th>
</tr>
<tr >
<td class="left">СПб</td>
<td>199</td>
<td class="right">65.12</td>
</tr>
<tr class="yellow">
<td class="left">Москва</td>
<td> 69</td>
<td class="right">21.3</td>
</tr >
<td class="left">Киев</td>
<td> 5</td>
<td class="right">8</td>
<tr class="yellow">
<td class="left" colspan="2">Посещений за весь период</td>
<td class="right">273</td>
</tr>
</table>
</body>
</html>
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: "Arial", sans-serif;
}
table {
width: 350px;
border-collapse: collapse;
}
.color {
color: white;
background-color: darkcyan;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
tr {
border-bottom: 1px solid lightgrey;
}
td {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.yellow {
background-color: lightyellow;
}
Буду рад, скорейшей обратной связи!