помогите...почему не получается таблица? таблица посложнее [17/23]

Курсы §5. Знакомство с таблицами
1 
<!DOCTYPE html>
<html>
    <head>
       <title>Таблица посложнее</title>
       <meta charset="utf-8">
    </head>
    <body>
        <table>
            <caption>Посещения по городам</caption>
            <tr>
                <th>Город</th>
                <th>Посещения</th>
                <th>Страниц</th>
                <th>Время</th>
            </tr>
            <tr>
                <td>СПБ</td>
                <td>199</td>
                <td>18,02</td>
                <td>00:13:45</td>
            </tr>
            <tr>
                <td>Москва</td>
                <td>69</td>
                <td rowspan="2">нет данных</td>
                <td>00:00:44</td>
            </tr>
            <tr>
                <td>Киев</td>
                <td>5 	</td>
                <td>00:18:07</td>
            </tr>
            <tr>
                <td colspan="3">Всего посещений</td>
                <td>273</td>
            </tr>
        </table>
    </body>
</html>

CSS
body{
width:260px;
margin:0;
padding:10px;
font-size:15px;
font-family:"Arial";
}
caption{
    border-collapse:collapse;
    caption-side:bottom;
    text-align:center;
}
table{
    border-collapse:collapse;
}
th{ 
    border-collapse:collapse;
    padding:10px;
    border-collapse:collapse;
    border-bottom:2px solid black;
}
td{
    border-collapse:collapse;
    padding:10px;
    border:1px solid lightgray;
}
2

HTML-код не видно. Воспользуйтесь кнопкой </> для вставки. И для начала уберите лишние свойства border-collapse: collapse; Используйте его один раз для таблицы, а не для ячеек.

3

.giv.png587×640 6.12 KB

4

.giv.png553×764 10.5 KB

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

Обратите внимание на вот эти правила. Их не нужно было менять. Еще уберите лишние border-collapse: collapse:, как говорила ранее. В HTML -коде уберите скобку } в самом конце перед закрывающимся тегом table.
Для вставки кода пользуйтесь возможностями форума.

6

я убрала лишние border-collapse:collapse; и скобку}…
моя табличка получается очень маленькая… поэтому я ее так увеличила в CSS …
в общем она у меня не получается… прям стопор какой то…одна из всех заданий “Знакомство мс таблицами”

7

Можете показать свой окончательный вариант? Код и картинку, как у вас это отображается?

8

вот.png955×787 66.4 KB

9

98%? А что в различиях?

10

:grinning:… не поверите… вместо СПб я написала СПБ … и мучаюсь…
я вчера это исправила… нозакончился лимит моих перезагрузок…
сейчас 100 процентов… извините… спасибо … и удачи вам!!!

1 лайк
11

Взаимно)

12

добрый день!
если позволите, я воспользуюсь данной темой.
У меня также возникла проблема с этим заданием… и не могу найти “в чём”.
Я проверила html-редактор… там все необходимые теги в паре и закрыты в конце. У самой есть подозрение, что накосячила в CSS.
Суть Проблемы: ячейки больше по размеру, чем в шаблоне, возможно по этой причине, а может и нет, но текст внутри ячеек, начиная со второго столбца съезжает от правого края к центру и в завершение - фраза “нет данных” разбивается в два ряда, а не в одну строчку… ПОМОГИТЕ, прошу ))) голова уже на бекрень, а решени не вижу((

Screenshot_1.png1020×452 58.5 KB

13

на всякий пожарный всё же отправляю скрин своего html-редактора, как раз там, где “нет данных

Screenshot_2.png1003×379 31.8 KB
”

14

поняла))
в предыдущих испытаниях, на др.курсах, нас предупреждали, что гадать по мини-brws - глупо… а вот я не послушала ))
в стиле td добавила лишний padding
http://prntscr.com/96d8pr

1 лайк
15 
<!DOCTYPE html>
<html>
    <head>
       <title>Таблица посложнее</title>
       <meta charset="utf-8">
    </head>
    <body>
        <table>
        <caption>Посещения по городам</caption>
            <tr>
                <th>Город</th>
                <th>Посещения</th>
                <th>Страниц</th>
                <th>Время</th>
            </tr>
            <tr>
                <td>СПБ</td>
                <td>199</td>
                <td>18,02</td>
                <td>00:13:45</td>
            </tr>
            <tr>
                <td>Москва</td>
                <td>69</td>
                <td rowspan="2">нет данных</td>
                <td>00:00:44</td>
            </tr>
            <tr>
                <td>Киев</td>
                <td>5</td>
                <td>00:18:07</td>
            </tr>
            <tr>
                <td colspan="3">Всего посещений</td>
                <td>273</td>
            </tr>
        </table>
    </body>
</html>



body{
    width:450px;
    margin:0;
    padding:10px;
    font-size:14px;
    font-family: Arial;
}
caption{
    caption-side: bottom;
}
table{
    border-collapse:collapse;
    color: black;
}
th{ 
    border-collapse:collapse;
    padding:5px;
    border-collapse:collapse;
    border-bottom:2px solid black;
}
td{
    border-collapse:collapse;
    padding:10px;
    border:1px solid #ccc;
    border-bottom: 2px solid lightgray;
    font-family: Arial;
}
16 
body{
    width:450px;
    margin:0;
    padding:10px;
    font-size:14px;
    font-family: Arial;
}
caption{
    caption-side: bottom;
}
table{
    border-collapse:collapse;
    color: black;
}
th{ 
    border-collapse:collapse;
    padding:5px;
    border-collapse:collapse;
    border-bottom:2px solid black;
}
td{
    border-collapse:collapse;
    padding:10px;
    border:1px solid #ccc;
    border-bottom: 2px solid lightgray;
    font-family: Arial;
}
17

border-collapse:collapse; пишется один раз, для table.