Я уже десятки раз крутила коды и так и этак, запуталась совсем. Что не так с кодом?
<!DOCTYPE html>
<html>
<head>
<title>Испытание: итоговая таблица</title>
<meta charset="utf-8">
</head>
<body>
<h1>Итоговая таблица</h1>
<table>
<tr>
<th>Город</th>
<th>Посещений</th>
<th>%</th>
</tr>
<tr>
<td class="left">СПБ</td>
<td class="centr">199</td>
<td class="right">65.12</td>
</tr>
</tr>
<tr class="grey">
<td>Москва</td>
<td class="centr">69</td>
<td class="right">21.3</td>
</tr>
<tr>
<td> Киев</td>
<td class="centr">5</td>
<td class="right">8</td>
</tr>
<tr>
<td class="grey" colspan="2"> Посещений за весь период </td>
<td class="grey" class="right">273</td>
</tr>
</table>
</body>
body{
width:260px;
margin:0;
padding:10px;
font-size:11px;
font-family:"Arial";
}
table{
border-collapse:collapse;
border-spacing:20px;
padding-top: 10px;
padding-bottom: 10px;
width:90%;
height:170px;
}
td{
border-bottom:1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
th{
border-top:1px solid black;
border-bottom:1px solid black;
color:white;
background-color:#618AD2;
padding-top: 10px;
padding-bottom: 10px;
text-align:left;
panding-left:10px;
}
.grey{
border-bottom:1px
padding:10px;
background-color:#F5F5F5;
padding-top: 10px;
padding-bottom: 10px;
}
.centr{
text-align:center;
}
.right{
text-align:right;
panding-right:10px;
}
.left{
text-align:left;
panding-right:10px;
}