Насколько код можно оптимизировать? 23/23

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

Задача решена . Что лишнего я написал? Хочется максимально лаконично решить задачу.

2 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr>
                <th class="th-left">Город</th>
                <th class="th-center">Посещений</th>
                <th class="th-right">%</th>
            </tr>
            <tr class="tr-gray">
                <td>СПб</td>
                <td class="td-center">199</td>
                <td class="td-right">65.12</td>
            </tr>
            <tr class="tr-yellow">
                <td>Москва</td>
                <td class="td-center">69</td>
                <td class="td-right">21.3</td>
            </tr>
            <tr  class="tr-gray">
                <td>Киев</td>
                <td class="td-center">5</td>
                <td class="td-right">8</td>
            </tr>
            <tr class="tr-yellow">
                <td colspan="2">Посещений за весь период</td>
                <td class="td-right">273</td>
               
            </tr>
        </table>
    </body>
</html>
1 лайк
3 
body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

table {
    border-collapse: collapse;
    width: 350px;
    
    }
    
th {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 10px;
    width: 33%;
    
    }
    
td {
    border-bottom: 1px solid lightgray;
    padding: 10px;
    width: 33%;
    }
    
.th-left {
        border-left: 0px;
        text-align: left;
        background-color: darkcyan;
        color: white;
        }
.th-right {
        border-right: 0px;
        text-align: right;
        background-color: darkcyan;
        color: white;
        }
.th-center {
        background-color: lightblue;
        color: white;
        } 
.td-center {
        text-align: center;
    }
.td-right {
        text-align: right;
    }

.tr-yellow {
       background-color: lightyellow;
    }
1 лайк
4

Белый цвет текста можно было записать в правило для th.
Зачем обнулять рамку слева и справа у th, если ее и так нет?

Для выделения строк желтым можно использовать псевдоклассы: tr:nth-child(2n+1)

5

Да, действительно! Спасибо, Инеска!

6

Мне понравилась ваша таблица. Упорядоченная и лаконичная.Когда выполнял свое задание “ориентировался” на нее.

7

Та же ситуация: завершил задачу на 100 процентов, но думаю, что в коде лишнего понапихал. Смотря на код ТСа, уже вижу лишнее описание процентного соотношения не в CSS, а в HTMl, что еще?
CSS
.cell-1 {
vertical-align: bottom;
}

.column-2 {
    text-align: right;
}

.column-3 {
    text-align: center;
}

table {
    border-collapse: collapse;
    border: 2px solid black;
}

td {
    padding: 5px;
    padding-right: 10px;
    border: 1px solid lightgray;
}

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

caption {
    margin-bottom: 10px;
    font-size: 18px;
}

П.С. Не нашёл как спрятать код под спойлер.

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

А для чего вертикальное выравнивание здесь?
Рамка у table лишняя.

10

Не могу найти у себя в задании такого, либо с прошлого скопировал, либо уже исправил, но спасибо за ответ :slight_smile:

11

Мне это очень приятно! Можете добавляться ко мне в вк. Будем обсуждать и решать трудные моменты.

12

Благодарю за приглашение.