23/23

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

image.png563×736 40.3 KB

Как передвинуть цифры на скрине

2

text-align:right ?

3

Код текстом, пожалуйста.

4 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>

   <table>
               <tr> 
<th class="r1" style="width: 33%;">Город</th>
<th class="r2" style="width: 33%;">Посещений</th>
<th class="r3"style="width: 33%;">%</th>
</tr>
<tr>
<td class="r7">СПб</td>
<td class="r5">199</td>
<td class="r9">65.12</td>
</tr>
<tr>
<td class="row-4">Москва</td>
<td class="row-8">69</td>
<td class="row-6">21.3</td>
</tr>
<tr>
<td class="row-7">Киев</td>
<td class="row-5">5</td>
<td class="row-9">8</td>
</tr>
<tr>
<td colspan="2" class="row-4">Посещений за весь период</td>
<td class="row-6">273</td>
</tr>
</table>
</body>
</html>
5 
body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}


table {
        padding: 5px;
        border-collapse: collapse;
        
    }
    th {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        padding: 10px;
        
    }
    td {
        padding: 10px;
        border-bottom: 1px solid lightgray;
        
    }
    .r1 {
        background-color:darkcyan;
        color: white;
        text-align: left;
        
    }
    .r2 {
        background-color:lightblue;
        color: white;
    }
    .r3 {
        background-color:darkcyan;
        color: white;
        text-align: right;
    }
    .row-4 {
        text-align:left;
        background-color: lightyellow;
    }
    .r5 {
        text-align:center;
    }
    .row-6 {
        text-align:right;
        background-color: lightyellow;
    }
    .r7 {
        text-align: left;
    }
    .row-8 {
        text-align:center;
        background-color: lightyellow;
         
    }
    .r9 {
        text-align:right;
    }
6

Сравните названия классов в html у нужных вам ячеек и названия селекторов в css.