хотел бы уточнить есть ли более компактное решение ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: итоговая таблица</title>
</head>
<body>
<h1>Итоговая таблица</h1>
<table>
<tr><th class="col-1">Город</th> <th class="col-2"> Посещений</th> <th class="col-3"> %</th></tr>
<tr><td class="col-1">СПб</td> <td>199</td> <td class="col-3"> 65.12</td></tr>
<tr class="row-1"><td class="col-1">Москва</td> <td>69</td> <td class="col-3"> 21.3</td></tr>
<tr><td class="col-1">Киев</td> <td>5</td> <td class="col-3"> 8</td></tr>
<tr class="row-1"><td class="col-1" colspan="2">Посещений за весь период</td> <td class="col-3">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;
text-align:center;
}
th{
width:33%;
border-top:1px solid black;
background-color:darkcyan;
color:white;
border-bottom:1px solid black;
padding:10px;
}
td {
padding:10px;
}
.col-1{
text-align:left;
}
.col-2{
background-color:lightblue;
}
.col-3{
text-align:right;
}
.row-1{
border-top:1px solid lightgray;
background-color:lightyellow;
border-bottom:1px solid lightgray;
}