Испытание: таблица получилась сложной

Курсы §5. Знакомство с таблицами
1 
         Доброго  времени  суток!
    Итоговая табличка вышла уж очень  сложной, думаю , что можно сделать гораздо  проще.
    Помогите разобраться,пожалуйста,как будет правильнее выполнить это задание, какому следовать алгоритму?
        Вот хтмл
   

 <html>
        <head>
           <title>Испытание: итоговая таблица</title>
           <meta charset="utf-8">
        </head>
        <body>
            <h1>Итоговая таблица</h1>
            <table>
                <tr>
                    <th class="col1">Город</th>
                    <th class="col2">Посещений</th>
                    <th class="col3">%</th>
                </tr>
                <tr class="row1">
                    <td class="col1">СПБ</td>
                    <td class="col2">199</td>
                    <td class="col3">65.12</td>
                </tr>
                <tr class="row2">
                    <td class="col1">Москва</td>
                    <td class="col2">69</td>
                    <td class="col3">21.3</td>
                </tr>
                <tr class=row1>
                    <td class="col1">Киев</td>
                    <td class="col2">5</td>
                    <td class="col3">8</td>
                </tr>
                <tr class="row2">
                    <td colspan="2" class="col1">Посещений за весь период</td>
                    <td class="col3">273</td>
                </tr>
            </table>
        </body>
    </html>
        
         вот цсс
        
        body{
            width:260px;
            margin:0;
            padding:0 10px;
            font-size:11px;
            font-family:"Arial";
        }
        table{
            border-collapse:collapse;
            text-align:center;
        }
        .col1{
            text-align:left;
            padding:10px;
            width:33%;
        }
        .col2{
            text-align:center;
            padding:10px;
            width:33%;
        }
        .col3{
            text-align:right;
            padding:10px;
            width:33%;
        }
        th{
            background-color:#618AD2;
            color:white;
            border-top:1px solid black;
            border-bottom:1px solid black;
        } 
        .row1{
            background-color:white;
            border-top:1px solid#CCCCCC;
            }
        .row2{
            background-color:#F5F5F5;
            border-top:1px solid#CCCCCC;
            border-bottom:1px solid#CCCCCC;
        }
2

Дублирующиеся правила типа padding:10px; и border-top:1px solid#CCCCCC; можно задать для всех однотипных блоков.

А так-то это испытание такое специально сделано заковыристое :smile: В жизни всё попроще. Кроме того тут запросто можно пользовать селекторами nth-child (но они разбираются дальше в курсах).

3

Спасибо большое , разобрался чуток, ошибка моя в том , что полез сразу проходить все курсы по порядку, не ознакомившись с картой обучения)