Испытание: итоговая таблица [23/23], не могу достичь 100%

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

Ребята, добрый день, выполняя 23 задание, не могу достигнуть 100%, так как не знаю, как сделать корректно выравнивание текста.

У меня есть только 1 выход: использовать инлайновые стили, но это, как я понимаю, дурной тон и есть более корректное решение.
Был бы благодарен за помощь и совет. Скриншот с результатами во вложении.

Html-код

`

Испытание: итоговая таблица

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

Город Посещений %
СПб 199 65.12
Москва 69 21.3
Киев 5 8
Посещений за весь период 273
`

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

table {
border-collapse: collapse;
}

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

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

.firstrow {
background-color: darkcyan;
color: white;
}

.thirdandthithrow {
background-color: lightyellow;
}

СкринКода.png1153×584 69.2 KB

2

Честно говоря, не совсем понимаю, что мешает вам задать выравнивание ячейкам с помощью text-align: center; или каким образом вы собирались это сделать используя инлайновые стили…?

3

Каждой ячейке придётся ручками писать атрибут text-align: center, вы про это?
Я как раз об этом же, просто это гемор, поэтому я пытаюсь найти решение через CSS

4

Ручками будете дописывать классы, если не хватит тех, что есть.
Пересмотрела. Точно не хватит.
И ширину перенесите в CSS-код.

5

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

Был бы очень благодарен

6

Ладно. Давайте подробнее. Вы задали ширину для th в HTML-коде, 33%. Перенесите эту запись в CSS-код. Будет правильнее и в три раза короче.
Далее. Вы задавали классы ячейкам для того, чтобы покрасить их в другие цвета.
Задайте еще классы (названия любые, только английские, на вашу фантазию) для выравнивания.
Еще подсказка. Чтобы покрасить всю строку, класс можете задать для tr, а не для каждой ячейки внутри.

7

Спасибо большое, сейчас попробую и отпишусь)

8

Подскажите, пожалуйста, я правильно задал синтаксис в случае добавления второго класса?
<th class="firstrow" class="test">Город</th>

9

Нет, неправильно. Два класса надо писать внутри одного атрибута через пробел.
class=“firstrow test”

1 лайк
10

А еще для задания выравнивания можно применить псевдокласс last-child и доп классы не нужны будут, но это я забежал вперед:) с умничал можно сказать :smile:

11

Пусть хоть с классами для начала сделает)

12

Ну я и говорю это я так с умничал :smile: может он захочет раньше узнать о применении псевдоклассов исходя из моего ответа :slight_smile:

13

Благодарю за советы, я справился, пока не буду торопить события по поводу псевдоклассов)

1 лайк
14

.row-1 { background-color: darkcyan;
text-align: left;
}
.row-2 { background-color: lightblue;
text-align: center;
}
.row-3 { background-color: darkcyan;
text-align: right;}
.row-4 { background-color: lightyellow;
}
.row-5 { background-color: lightyellow;
}
.column-1 { text-align: left;
}
.column-2 { text-align: center;
}
.column-3 { text-align: right;
}

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table{
width: 100%;
height: 200px;
border-collapse: collapse;
}
th{
color: white;
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 10px;
}

td{
border-bottom: 1px solid lightgray;
padding: 10px;

}

Испытание: итоговая таблица

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

    <th class="row-1" style="width: 33%">Город</th>
    <th class="row-2" style="width: 33%">Посещений</th>
    <th class="row-3" style="width: 33%">%</th>
    </tr>
    
    <tr><td class="column-1">СПб</td>
    <td class="column-2">199</td>
    <td class="column-3">65.12</td>
    </tr>
    
    <tr class="row-4"><td class="column-1">Москва</td>
    <td class="column-2">69</td>
    <td class="column-3">21.3</td>
    </tr>
    
    <tr><td class="column-1">Киев</td>
    <td class="column-2">5</td>
    <td class="column-3">8</td>
    </tr>
    
    <tr class="row-5"><td colspan="2" class="column-1">Посещений за весь период</td>
    <td class="column-3">273</td>
    </tr>
    
    </table>

</body>
15

наверное, сильно намудрила, использовала все, что можно и не выходит достичь 100%(

16

Покажите пожалуйста скрин с различиями а то я с мобильного телефона, так проще будет увидеть куда посмотреть.

17

раличия.png1366×728 103 KB

18

Буквально через 10 минут окажу помощь

19

Зря задали высоту и ширину в table, а так, на мой взгляд, все норм)

2 лайка
20

без них проверка 100%