Итоговая таблица 23/23

Курсы §5. Знакомство с таблицами
1

Вечер добрый!

Написала вроде всё правильно, но при проверке оказывается, что таблица слишком близко к краю и шрифт крупнее нужного. Кажется, я где-то прокосячила капитально.

Спасите-помогите-подскажите.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: итоговая таблица</title>
<table>
<h1>Итоговая таблица</h1>
<tr>
<th class="pim-1" style="width: 33%;"> Город </th>
<th class="pim-2" style="width: 33%;"> Посещений </th>
<th class="pim-3" style="width: 33%;"> % </th>
</tr>
<tr>
<td class="pim-4">СПб </td>
<td> 199 </td>
<td class="pim-9"> 65.12 </td>
</tr>

<tr>
<td class="pim-5"> Москва </td>
<td class="pim-6"> 69 </td>
<td class="pim-7"> 21.3 </td>
</tr>

<tr>
<td class="pim-8"> Киев </td>
<td> 5 </td>
<td class="pim-9"> 8 </td>
</tr>
<tr>
<td colspan="2" class="pim-5"> Посещений за весь период </td> 
<td class="pim-7"> 273 </td>
</tr>

</table>
</body>
</html>

body {
width: 350px;
margin: 0;
padding: 10px
font-size: 14px;
font-family: Arial, sans-serif;
}

table {
border-collapse: collapse;
color: black;
padding: 5px
}
th {
border-top: 1px solid black;
border-bottom: 1px solid black;
color: white;
padding: 10px;
}

td {
border-bottom: 1px solid lightgray;
text-align: center;
padding: 10px;
}

.pim-1 {
background-color: darkcyan;
color: white;
text-align: left;
}

.pim-2 {
background-color: lightblue;
color: white;
text-align: center;
}
.pim-3 {
background-color: darkcyan;
color: white;
text-align: right;
}
.pim-4 {
text-align: left;
}
.pim-5 {
text-align: left;
background-color: lightyellow;
}
.pim-6 {
text-align: center;
background-color: lightyellow;
}
.pim-7 {
text-align: right;
background-color: lightyellow;
}
.pim-8 {
text-align: left;
}
.pim-9 {
text-align: right;
}

2

Пропущена точка с запятой в конце свойства padding.

3

Ещё надо в CSS body надо добавить “margin-top:-10px;” и будет вообще улет!

4

Текст "как есть" (без применения форматирования)

<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr>
                <th class="cell-1">Город </th>      
                <th class="cell-2">Посещений   </th>    
                <th class="cell-3">%</th>
            </tr>
            <tr>
                <td class="collum-1">СПб   </td>      
                <td class="collum-2">199    </td>         
                <td class="collum-3">65.12</td>
            </tr>
            <tr>
                <td class="collum-1">Москва      </td>
                <td class="collum-2">69           </td>   
                <td class="collum-3">21.3</td>
            </tr>
            <tr>
                <td class="collum-1">Киев      </td> 
                <td class="collum-2">5          </td>     
                <td class="collum-3">8</td>
            </tr>
            <tr>
                <td colspan=2 class="collum-1">Посещений за весь период</td>    
                <td class="collum-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;
}

tr{
background-color:lightyellow;
}

td{
padding:10px;
border-bottom: solid lightgrey 1px;
width: 33%;
}

.cell-1{
text-align: left;
background-color: darkcyan;
}

.cell-2{
text-align: center;
background-color: lightblue;
}

.cell-3{
text-align: right;
background-color: darkcyan;
}

.collum-1{
text-align: left;
padding: 10px;
}

.collum-2{
text-align: center;
}

.collum-3{
text-align: right;
}

th{
border: black solid 1px;
padding: 10px;
color:white;
}