Можно оптимизировать код?

Сделал итоговую таблицу не без труда, но сама писала коды и сама искала погрешности. и потому результатми я довольна - 100%

Но мне кажется, что я что-то перемудрила и у меня очень большой код получился. Можно и нужно ли где-то что-то корректировать?

    <h1>Итоговая таблица</h1>
    <table>
        <tr>
            <th style="width: 33%"class="cell1">Город</th>
            <th style="width: 33%" class="cell2">Посещений</th>
            <th style="width: 33%" class="cell4">%</th>
        </tr>
        <tr>
            <td>СПб</td>
            <td class="cell5">199</td>
            <td class="cell8">65.12</td>
        </tr>
        <tr>
            <td class="cell3">Москва</td>
            <td class="cell7">69</td>
            <td class="cell6">21.3</td>
        </tr><tr>
            <td>Киев</td>
            <td class="cell5">5</td>
            <td class="cell8">8</td>
        </tr>
        <tr>
            <td class="cell3" colspan="2">Посещений за весь период </td>
            <td class="cell6">273</td>
        </tr>
    </table>

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

}
th {
padding:10px;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-align: left;
width:33%;
}
td {
padding: 10px;
border-bottom: 1px solid lightgray;
text-align: left;
width:33%;
}
.cell1{
background-color: darkcyan;
color: white;
}
.cell2{
background-color: lightblue;
color: white;
text-align: center;
}
.cell3{
background-color: lightyellow;
}
.cell4{
background-color: darkcyan;
color: white;
text-align: right;
}
.cell7{
background-color: lightyellow;
text-align: center
}
.cell5{
text-align: center
}
.cell6{
background-color: lightyellow;
text-align: right
}
.cell8{
text-align: right
}

Да, код можно оптимизировать.

  1. Для чего ширина th задана при самих тегах и одновременно в стилях?
  2. Вот стили (названия классов можно изменить - я не претендую на их неповторимость):

table {
border-collapse: collapse;
}

th, td {
width: 33%;
padding: 10px;
text-align: left;
border-bottom: 1px solid lightgray;
}

th {
border-top: 1px solid black;
border-bottom: 1px solid black;
}

.th-row {
background-color: darkcyan;
color: white;
}

.row-colored {
background-color: lightyellow;
}

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

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

.top-center-cell {
background-color: lightblue;
}

А вот разметка:

<table>
        <tr class="th-row">
            <th>Город</th>
            <th class="column-center top-center-cell">Посещений</th>
            <th class="column-right">%</th>
        </tr>
        <tr>
            <td>СПб</td>
            <td class="column-center">199</td>
            <td class="column-right">65.12</td>
        </tr>
        <tr class="row-colored">
            <td>Москва</td>
            <td class="column-center">69</td>
            <td class="column-right">21.3</td>
        </tr>
        <tr>
            <td>Киев</td>
            <td class="column-center">5</td>
            <td class="column-right">8</td>
        </tr>
        <tr class="row-colored">
            <td colspan="2">Посещений за весь период </td>
            <td class="column-right">273</td>
        </tr>
    </table>

Кстати, а как Вы делаете, чтобы разметка вставилась так красиво, как в Вашем сообщении?
UPD: сделал по совету @Ineska - действительно, нужно пропустить строку, чтобы вложенность кода сохранилась )

1 лайк

Здесь только один механизм вставки кода, через кнопку </>.
Из личных наблюдений: чтобы код вставился красиво, нужно перед ним и после него оставить пустую строку.

2 лайка

Да Вы просто волшебник - точно, строку надо вставить!!!

Спасибо за совет!
мне нужно больше практики. Хоть таблицу и сделала, а многие моменты остались мною непоняты.)

А что конкретно осталось непонятно?

например, я не уловила что можно сделать так:
class=“column-center top-center-cell”.
а потом отдльно задавать параметры для column-center и для top-center-cell.
или вот:th, td {
width: 33%;{
можно просто поставит запятую и задать сразу параметры.
Я всё делаю линейно, задаю чуть ли не для каждой ячейки отдельно параметры. Хотя пробовала сама оптимизировать. как-то пазл пока не складывается в голове))

Ну, CSS ведь и нужен был для того, чтобы сделать код гибче, т.е., грубо говоря, Вы пишете всего 1 селектор, а применяется он, допустим, к 10 тегам. Если же делать 10 селекторов на эти 10 тегов - смысл CSS? Это то же самое, что прописывать внутренние стили к каждому тегу в разметке - это не экономит ни сил, ни времени… Да, селекторы можно задавать через запятую: если не знали этого, запоминайте, это нужная вещь (здесь я написал их в одну строку, т.к. они коротенькие, а если это будут классы - лучше писать каждый селектор с новой строки, для лучшей читабельности кода). А всё остальное - это каскадирование, т.е. ниже Вы пишете то, что нужно изменить и применяете к нему новое свойство - и это переопределяет какой-либо элемент или группу. И ещё один приём - как раз тот, что Вы процитировали в “непонятно”: можно задавать 2 класса одному и тому же тегу: скажем, у Вас есть 3 тега, которые имеют одинаковые свойства, но один из них чем-то различается. В таком случае, один класс будет отвечать за общие для всех 3-х тегов свойства, а один - который Вы и присвоите тому, который отличается, - за отличные.

1 лайк

В общем открываю тему ещё раз и не только на этом ресурсе и тренируюсь))))
Спасибо за разъяснения и поддержку)

Да, всё верно - нужно итоговые задания, да и сами темы несколько раз порой сделать, вспомнить, чтобы дошлО!

1 лайк