Что не так?!

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

Ребят. В чём ошибка?
Подскажите пожалуйста.
При наложении картинки идентичны.

HTML

<html>
<head>
<title>Таблица посложнее</title>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<th class="g">Город</th> 
<th class="second">Посещений</th> 
<th class="o">%</th>
</tr>
<tr>
<td class="g">СПБ</td> 
<td class="second">199</td> 
<td class="o">65.12</td></tr>
<tr class="tr">
<td class="g">Москва</td> 
<td class="second">69</td> 
<td class="o">21.3</td>
</tr>
<tr>
<td class="g">Киев</td> 
<td class="second">5</td> 
<td class="o">8</td>
</tr>
<tr class="tr">
<td class="g" colspan="2">Посещений за весь период</td> 
<td class="o">273</td>
</tr>
</table>
</body>
</html>

CSS

body{
width:260px;
margin:0;
padding:0 11px;
font-size:11px;
font-family:"Arial";
}
table{ 
width:100%;
height:170px;
border-collapse:collapse;
}
td{
border-bottom:1px solid #cccccc;
}
th{
border-top:1px solid black;
border-bottom:1px solid black;
color:white;
background-color:#618AD2; 
}
.tr{
background-color:#F5F5F5;
}
.g{
text-align:left;
padding-left:10px;
}
.second{
text-align:center;
padding-right:24px;
}
.o{
text-align:right;
padding-right:10px;
}
2

Воспользуйтесь сервисом codepen.io и укажите ссылку на задание.

2 лайка
3

Во-первых, в разметке перед таблицей есть заголовок <h1>Итоговая таблица</h1>.

Во-вторых, таблица всё же немного отличается, это хорошо видно в режиме «Различия» или «Наложение».

В-третьих, рекомендую вам регулировать высоту ячеек не с помощью задания высоты таблицы, а заданием padding-ов ячейкам (td, th { padding-top: 10px; padding-bottom: 10px; }).

В-четвёртых, как верно заметил @SergeyBosak, лучше для демонстрации кода пользоваться песочницами вроде codepen или cssdeck.

4

Спасибо, разобрался. Тема закрыта.

5

подскажите, пожалуйста, вчем проблема? как тступ слева сделать??? ведь свойства body менять нельзя… обсуждения читала, у многих также как у меня, и у них пишет 100%, а я нажимаю проверить и ничего не происходит, только попытки уменьшаются…

<!DOCTYPE html>
<html>
    <head>
       <title>Простая, но аккуратная таблица</title>
       <meta charset="utf-8">
    </head>
    <body>
        <h1>Посещения по городам</h1>
        <table>
         <tr>
           <td>Город</td>
           <td>Посещения</td>
           <td>Страниц</td>
           <td>Время</td>
          </tr>
          <tr>
           <td>СПБ</td>
           <td>199</td>
           <td>18,02</td>
           <td>00:13:45</td>
          </tr>
          <tr>
           <td>Москва</td>
           <td>69</td>
           <td>1,48</td>
           <td>00:00:44</td>
          </tr>
          <tr>
           <td>Киев</td>
           <td>5</td>
           <td>13,43</td>
           <td>00:18:07</td>
          </tr>
        </table>
    </body>
</html>

body{
    width:260px;
    margin:0;
    padding:0; 10px;
    font-size:11px;
    font-family:"Arial";
}
table{
    border-collapse:collapse;
}
td{
    border-bottom:1px solid#cccccc;
    padding:10px;
}
6

Вот и ошибка =) Переключайтесь в режим «Наложения» и «Различия» в мини-браузере, чтобы было видно, где проблема.

1 лайк
7

Что-то эта ошибка уже не первый раз встречается) Кто-то в комменты скинул “Хороший” код :grin:

8

я прошу прощения,но в свойствах body у меня так и написано padding:0px;10px; по условию задания здесь менять ничего нельзя, хотя ситуация меняется в правильную сторону, если margin изменить с нулевого значения. а в td, если поставить padding:0;10px вся таблица устремляется влево. всю голову сломала, вот мое решение и результат:

9

Наталья, Я прав?
Так вот, Вам говорят убрать лишнюю точку-запятую ";"
в свойстве padding у селектора body

padding: 0; 10px;

просто после Нуля уберите “;”

padding: 0 10px;

B всё сразу должно наладиться. Возможно Вы случайно вписали туда эту точку с запятой, а возможно баг.

И еще попрошу Вас прям даже настоятельно попрошу Пересесть с браузера Амиго. Пожалуйста, Вы все-таки Веб разработкам обучаетесь, Амиго точно не тот браузер. Установите Хром, Мозилу, Оперу наконец

1 лайк
10

спасибо огромное!!! все наконец-то получилось))) и за рекомендацию насчет браузера!!!

11

Не выходит правильное выравнивание в таблице, подскажите что не так?

HTML

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

CSS

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

table{
    border-collapse:collapse;
}
td{
    padding:10px;
    border-bottom:1px solid #CCCCCC;
    width:33%
   
}
th{
    padding:10px;
    color:white;
    border-top:1px solid black;
    border-bottom:1px solid black;
}

.color_line_blue{
    background-color:#618AD2;
}
.color_line_gray{
    background-color:#F5F5F5;
}
.text_left{
    text-align:left;
}
.text_center{
    text-align:center;
}
.text_left{
    text-align:right;
}
12

Просто опечатка в названии класса.

13

Огромное спасибо!!!