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

Qelit · 21.Май.2016 13:50:37

Здравствуйте, нужна помощь в прохождении на 100%. Сейчас 92, задание выполнено, но хочется разобраться в чем проблема.

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

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

    <tr class="str-1">
    <td>СПб</td>
    <td style="text-align: center">199</td>
    <td style="text-align: right">65.12</td>
    </tr>
    
    <tr class="str-2">
    <td>Москва</td>
    <td style="text-align: center">69</td>
    <td style="text-align: right">21.3</td>
    </tr>
    
    <tr class="str-3">
    <td>Киев</td>
    <td style="text-align: center">5</td>
    <td style="text-align: right">8</td>
    </tr>
    
    <tr class="str-4">
    <td colspan="2" >Посещений за весь период</td>
    <td style="text-align: right">273</td>
    </tr>

Город	Посещений	%

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table
{
padding: 5px;
border-collapse: collapse;
}
th
{
text-align: left;
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 10px;
background-color: darkcyan;
color: white;
width: 33%;
}
td
{
padding: 10px;
border-bottom: 1px solid lightgray;
width: 33%;
}
.str-1
{
border-bottom: 1px solid lightgray;
}
.str-2
{
border-bottom: 1px solid lightgray;
background-color: lightyellow;
}
.str-3
{
border-bottom: 1px solid lightgray;
}
.str-4
{
background-color: lightyellow;
}

Ineska · 21.Май.2016 14:02:37

Начало таблицы не вижу. Кстати, как вы покрасили ячейку в заголовке голубым цветом? В css-коде не увидела… Предполагаю, что с помощью атрибута style, как и выравнивание.
Инлайновые стили - это плохая практика. Переделайте.

Qelit · 21.Май.2016 14:06:05

> <html>
>     <head>
>         <meta charset="utf-8">
>         <title>Испытание: итоговая таблица</title>
>     </head>
>     <body>
>         <h1>Итоговая таблица</h1>
> <table>
>         <tr>
>         <th>Город</th>  
>         <th style="background-color: lightblue; text-align: center">Посещений</th>
>         <th style="text-align: right">%</th>
>         <tr>

Вот начало, не знаю, почему в сообщение не вставилось.

Ineska · 21.Май.2016 14:07:40

В редакторе сообщений есть кнопка для вставки кода </>.

Qelit · 21.Май.2016 14:09:23

Спасибо, мучался со вставкой. Весь инлайн перенести в CSS? Может быть из-за этого проблема?

Ineska · 21.Май.2016 14:12:27

Тег tr не закрыли. А инлайновые стили (атрибут style) все же лучше переделать и в дальнейшем не злоупотреблять их использованием.

Qelit · 21.Май.2016 14:21:02

Большое спасибо, пошел переделывать. На будущее запомню про инлайновые стили. Лучше подольше в CSS буду писать.

Ineska · 21.Май.2016 14:22:49

Было бы неплохо позже увидеть здесь ваш переделанный вариант)

Qelit · 21.Май.2016 19:45:08

`<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
<table>
        <tr>
        <th>Город</th>  
        <th style="background-color: lightblue; text-align: center">Посещений</th>
        <th style="text-align: right">%</th>
        </tr>
        
        <tr class="str-1">
        <td>СПб</td>
        <td class="center-1">199</td>
        <td style="text-align: right">65.12</td>
        </tr>
        
        <tr class="str-2">
        <td>Москва</td>
        <td class="center-2">69</td>
        <td class="right-2">21.3</td>
        </tr>
        
        <tr class="str-3">
        <td>Киев</td>
        <td class="center-3">5</td>
        <td class="right-3">8</td>
        </tr>
        
        <tr class="str-4">
        <td colspan="2" >Посещений за весь период</td>
        <td class="right-4">273</td>
        </tr>
</table>
    </body>
</html>`
`body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}
table
{
    padding: 5px;
    border-collapse: collapse;
}
th
{
    text-align: left;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    padding: 10px;
    background-color: darkcyan;
    color: white;
    width: 33%;
}
td
{
 padding: 10px;
 border-bottom: 1px solid lightgray;
    width: 33%;
}
.str-1
{
   border-bottom: 1px solid lightgray; 
}
.str-2
{
   border-bottom: 1px solid lightgray; 
   background-color: lightyellow;
}
.str-3
{
   border-bottom: 1px solid lightgray; 
}
.str-4
{
   background-color: lightyellow;
}
.center-1
{
    text-align: center;
}
.center-2
{
    text-align: center;
}
.center-3
{
    text-align: center;
}
.right-1
{
    text-align: right;
}
.right-2
{
    text-align: right;
}
.right-3
{
    text-align: right;
}
.right-4
{
    text-align: right;

}`

Ineska · 21.Май.2016 20:18:30

Не все инлайновые стили убрали.
И еще совет. Не надо для каждой ячейки для выравнивания по центру или по правому краю создавать отдельный класс с одним и тем же правилом. То есть, если например за выравнивание по центру у вас отвечает правило с селектором .center-1, то класс с этим именем добавляется к каждой подходящей ячейке. Остальные классы .center-2 и .center-3 уже не нужны.

Aleksey_Fers · 21.Май.2016 21:18:48

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

Aleksey_Fers · 22.Май.2016 05:46:09

Если есть желание могу написать более верный код и увидите свои ошибки чтобы их не допускать в будущем

Ineska · 22.Май.2016 07:08:25

Ну, не всё плохо. Ошибок конечно много, но можно отметить и то, что сделано правильно. Сам “скелет” таблицы построен верно, и с объединением ячеек все в порядке. А то что стилями пока путаница, то уверена, что практически у всех так было сначала.

Gnom · 22.Май.2016 09:46:49

Да уж прям-таки все))
Qelit, давайте я вам немного помогу?

Начнем с заливки строк. У нас залиты 2 строки: Москва и Посещения
Значит tr надо объединить общим классом, например “str”. Потом в css вы задаете этому классу border-color, таким образом одним правилом заливаются две строки.
Теперь выравнивание текста. В первом столбике оно задано по умолчанию, остается центр и правая часть колонки.

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

Все вышеперечисленное вы объединяете одним классом, например, “center”. Затем в css задаете этому классу выравнивание текста по центру. Таким образом одно правило равняет текст сразу у четырех ячеек.
Точно так же, но другим классом объединяете вот этот столбец

(убираете инлайновые стили)

(и здесь их убираете)

Оставьте на все ячейки один класс, например, 'right", и ему же в css задаете выравнивание текста вправо.

Теперь css

Это лишнее.

Ну а код у вас сократится, если сделаете все вышеперечисленное) Как-то так, надеюсь, сама ни в чем не ошиблась)

Qelit · 22.Май.2016 10:42:04

Большое спасибо, только приехал домой, чуть позже сяду и переделаю. Тоже только с утра понял что мог бы объединить все в один класс. Лучше я сразу все переделаю, чем в будущем допускать ошибки.