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

user1000 · 03.Декабрь.2014 01:52:01

Господа,

Подскажите, пожалуйста, что не так.
Вот код: [jsfiddle][1].

P.S. Не нашел правил раздела, поэтому не понятно, надо ли создавать по каждой проблеме отдельную тему или писать в уже созданных.
[1]: http://jsfiddle.net/2r8rLtgu/

elemeNtk0 · 03.Декабрь.2014 06:42:51

Ну первое, на что хочется обратить внимание - caption, думаю тут уместнее использовать H1 + к нему никаких стилей применять не надо.
Второе: чрезмерное злоупотребление классами, когда можно использовать простые селекторы “по названию тега”.

Про злоупотребление не берите на свой счет, просто Имейте ввиду, что в следующих курсах на это обратите пристальное внимание)
И получится что-то типа:

body{
    width:260px;
    margin:0;
    padding:0 10px;
    font-size:11px;
    font-family:"Arial";
}
table {border-collapse:collapse;width:260px;}
td,th {padding:10px;}
th {color:#fff; background:#618AD2;border:1px solid #000;border-left:none;border-right:none;}
td {border-bottom:1px solid #ccc;width:33%;}
tr:nth-child(odd) {background:#F5F5F5;}
.center {text-align:center}
.left {text-align:left;}
.right {text-align:right;}

user1000 · 03.Декабрь.2014 08:14:01

H1 все вылечил. Спасибо за советы!

altair · 09.Декабрь.2014 19:44:47

Доброе время суток! Не могу пройти итоговое испытание, и не понимаю в чем загвоздка(
Вот мои труды)

body{
    width:260px;
    margin:0;
    padding:0 10px;
    font-size:11px;
    font-family:"Arial";
}

table {
    border-collapse:collapse;
    }
    caption{
        text-align:left;
        
        }
td{
    border-bottom: 1px solid #CCCCCC;
    width:33%;
    padding:10px;
    
    
    
    }
    th{
       border-bottom: 1px solid #000;
       border-top: 1px solid #000;
       background-color:#618AD2;
       color:#fff;
       padding:10px;
    
        }
.left{
    text-align:left;
    }
.right{
    text-align:right;
    }
    .center{
    text-align:center;
    }
.color{
    background-color:#F5F5F5;
    }

elemeNtk0 · 10.Декабрь.2014 03:42:51

прочитайте пожалуйста сообщения выше =)
У вас очень похожая ошибка.
не надо использовать тут Caption

altair · 17.Декабрь.2014 21:39:11

Дык он заработало каким то магическим образом (и бубен тут не применялся))) просто через пару дней решил проверить и заработал - 100% причем, я ничего не менял)

altair · 17.Декабрь.2014 21:39:52

кстати с Cption выдало 100%)

iness · 28.Декабрь.2014 20:06:56

сорри, сама разобралась

elemeNtk0 · 29.Декабрь.2014 06:18:12

Тот самый момент:

trainee · 07.Апрель.2015 07:35:26

я думаю стоит добавить в задание пометку о том что тут не надо использовать caption - потратил уйму времени на этот чертов заголовок

Helen_Om · 21.Апрель.2015 19:58:31

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

HTML

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: итоговая таблица</title>
       <meta charset="utf-8">
    </head>
    <body>
        <h1>Итоговая таблица</h1>
    <table>
    <tr>
        <th row="A" align="left">Город</th> 	
        <th row="A">Посещений</th> 	
        <th row="A" class="cell1">%</th>
    </tr>
    <tr>
        <td>СПБ</td><td class="row2">199</td><td class="row1">65.12</td>
    </tr>
    </tr>
    <tr  class="C">
       <td>Москва</td><td class="row2">69</td><td class="row1">21.3</td>
    </tr>
    <tr>
        <td>Киев</td><td class="row2">5</td><td class="row1">8</td>
    </tr>
    <tr class="C">
        <td colspan="2">Посещений за весь период</td><td class="row1">273</td>
    </tr>
        
    </table>
    </body>
</html>

CSS

table{
    border-collapse:collapse;
  }
body{
    width:260px;
    margin:0;
    padding:0 10px;
    font-size:11px;
    font-family:"Arial";
}

.rowA{
background-color:#618AD2;
}

tr.C{
    background-color:#F5F5F5;
}
td.row1{
    text-align:right;
}

td{
    padding:10px;
    padding-right:10px;
    border:0px solid black;
    }

th{
    padding:10px;
    border:0px solid black;
    border-top:1px solid black;
    border-bottom:1px solid black;
    background-color:#618AD2;
    color:white;
    width:33%
}
th.cell1{
    text-align:right;
}
td.row2{
    text-align:center;
}
tr{
border-top:2px  solid #CCCCCC;
}

juwain · 22.Апрель.2015 08:13:44

Проблема в границах для tr. Сделайте их не верхними, а нижними и однопиксельной толщины.

И в целом рекомендация: давайте блокам осмысленные классы, в классах вида А, cell1 никто, кроме вас не разберётся.

Helen_Om · 22.Апрель.2015 08:35:34

Большое спасибо! Есть над чем работать

Helen_Om · 29.Апрель.2015 14:38:27

Все, решила на все 100%. Правда на этот раз делала иначе все. скажите, пожалуйста, свое мнение, Вы можете разобраться в том, что я написала и насколько правильно/неправильно делать в шапке:

http://jsfiddle.net/elenika_om/kj179rfd/

Буду благодарна за критику!

elemeNtk0 · 12.Май.2015 03:52:51

@Helen_Om

Не пишите инлайновые стили. (не стоит добавлять код css в html
через style.
Вы забыли для первой строки сделать собственно
саму строку, th просто так сами по себе «гулять» не должны. У них
такой же родительский контейнер, как и у td → tr.
Повторю замечание @juwain’а: «давайте блокам осмысленные классы». Это не значит, что вместо cell1 надо делать класс rowA, rowB, rowC. У вас row → строка. td → столбец. cell было как-то даже лучше. А так попробуйте завязать класс на том, что с этой колонкой должно происходить. (текст выравнивается).
Сохраняйте форматирование кода (отступы, табуляцию). Вам потом будет сложно самой разобраться в нём через некоторое время.

Gwynnbleidd · 11.Октябрь.2016 08:26:10

Друзья, взгляните на мой кошмар) 10%-то я получил, но код сильно перегрузил?

Мой HtML-код

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

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

                <tr>
                    <td class="f">СПб</td>
                        <td class="e">199</td>
                            <td class="d">65.12</td>
                            </tr>
                            
                            <tr class="c">
                    <td class="f">Москва</td>
                        <td class="e">69</td>
                            <td class="d">21.3</td>
                            </tr>
                            
                            <tr>
                    <td class="f">Киев</td>
                        <td class="e">5</td>
                            <td class="d">8</td>
                            </tr>
                            
                            <tr class="c">
                    <td  class="f" id="c" colspan="2">Посещений за весь период</td>
                        <td class="d">273</td>
                            </tr>
                            </table>
                            
    </body>
</html>"

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

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

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

            <tr>
                <td class="f">СПб</td>
                    <td class="e">199</td>
                        <td class="d">65.12</td>
                        </tr>
                        
                        <tr class="c">
                <td class="f">Москва</td>
                    <td class="e">69</td>
                        <td class="d">21.3</td>
                        </tr>
                        
                        <tr>
                <td class="f">Киев</td>
                    <td class="e">5</td>
                        <td class="d">8</td>
                        </tr>
                        
                        <tr class="c">
                <td  class="f" id="c" colspan="2">Посещений за весь период</td>
                    <td class="d">273</td>
                        </tr>
                        </table>
                        
</body>

Мой CSS

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

table {
    border-collapse: collapse;
}

.a {
    background-color: darkcyan;
    color: white;
    text-align: left;
}

.b {
    background-color: lightblue;
    color: white;
}

.c {
    background-color: lightyellow;
}

.d {
    text-align: right;
}

.e {
    text-align: center;
}

.f {
    text-align: left;
}
    
#a {
    text-align: right;
 }
    
#b {
    text-align: center;
}

#c {
    text-align: left;
}

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

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

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

Ineska · 11.Октябрь.2016 08:42:32

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

PsyDuck · 12.Октябрь.2016 01:42:02

Как можно сюда свой код вставить? CSS отображает, а html нет

Ineska · 12.Октябрь.2016 06:23:19

Кнопка для вставки </> в редакторе сообщений.
Читайте немножко темы на форуме, не проходит и дня, чтобы мне не пришлось снова писать про неё…

Svetlanka · 27.Ноябрь.2016 15:18:07

Добрый день, прошу помощи, все идеально, кроме среднего столбца, плавает на миллиметр от образца, что только не меняла уже:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
<table>
        <tr>
        <th class="raw1" width:"33%">Город</td>
        <th class="raw2" width:"33%">Посещений</td>
        <th class="raw3" width:"33%">%</td>
        </tr>
        <tr>
        <td>СПб</td>
        <td class="col2">199</td>
        <td class="col3">65.12</td>
        </tr>
        <tr class="str1">
        <td>Москва</td>
        <td class="col2">69</td>
        <td class="col3">21.3</td>
        </tr>
        <tr>
        <td>Киев</td>
        <td class="col2">5</td>
        <td class="col3">8</td>
        </tr>
        <tr class="str1">
        <td colspan="2" >Посещений за весь период</td>
        <td class="col3">273</td>
        </tr>
</table>
    </body>
</html>

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

th {
border-top: solid black 1px;
border-bottom: solid black 1px;
color: white;
height: 35px;
width: 205px;
}
td {
border-bottom: solid lightgrey 1px;
padding: 10px;
}
.raw1 {
background: darkcyan;
text-align: left;
padding-left: 10px;

}
.raw2 {
background: lightblue;
text-align: center;

}
.raw3 {
background: darkcyan;
text-align: right;
padding-right: 10px;

}
.str1 {
background: lightyellow;
}
.col2 {
text-align: center;

}
.col3 {
text-align:right;
}