Помогите пройти задание 17/23 HELP!

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

Бьюсь целый день :fearful:

Вот что выходит у меня.
При наложении выдает это

Таблица посложнее Посещения по городам
Город Посещения Страниц Время
СПБ 199 18,02 00:13:45
Москва 69 нет данных 00:00:44
Киев 5 00:18:07
Всего посещений 273

body{
width:260px;
margin:0;
padding:0 10px;
font-size:14px;
font-family:“Arial”;
}
caption{
border-collapse:collapse;
caption-side:bottom;
text-align:centr;
}
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

От того, сколько раз напишете это свойство, код лучше не станет. Согласно теории border-collapse - это свойство таблицы, то есть прописывается один раз, для table.
Не надо менять стили у body, вас об этом не просили. Скопируйте свой код, а затем сбросьте его, чтобы иметь возможность сравнить, какие значения в правиле для body были изначально и что в итоге вышло у вас.

3

Спасибо!

4

добрый день.
прошу помочь с решением задачи.

HTML

Таблица посложнее Посещения по городам
Город Посещения Страниц Время
СПб 199 18,02 00:13:45
Москва 69 нет данных 00:00:44
Киев 5 00:18:07
Всего посещений 273

CSS

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

table {
border: 0px solid lightgray;
border-collapse: collapse;

    }

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

th {
border-bottom: 2px solid black;
padding-bottom: 16px;
padding: 9px;
padding-left: 2px;

}

5

Значения отступов кратны пяти.

6

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

table {
border-collapse: collapse;
border-left: 5px;
padding: 00 00 00 00px;
}
td {
border: 1px solid lightgray;
padding: 0px;
width: 35px;
height: 32px;

border-bottom: 5px;
text-align: left;
}

caption {
caption-side: bottom;
text-align: center;
width: 338px;
height: 290px;
padding-top: 1px;
}

th {
border-bottom: 2px solid black;
width: 30px;
height: 35px;
text-align: center;
}

7

Ineska, добрый день.
не могу победить данную таблицу.
подскажите, пожалуйста, конкретнее на что еще обратить внимание.

8
Таблица посложнее Посещения по городам
Город Посещения Страниц Время
СПб 199 18,02 00:13:45
Москва 69 нет данных 00:00:44
Киев 5 00:18:07
Всего посещений 273
9

Размеры ячеек определяются только отступами. Ширину и высоту задавать не надо. Для заголовка таблицы нужно только выравнивание по центру и caption-side.
Что это, не знаю. Похоже на метод тыка:

padding: 00 00 00 00px;

10

Ineska, добрый день.
правильно метод именно такой был. :sweat:
На просторах интернета нашел интересный пример выравнивания ячеек в css.
В очередной раз я все стер, заново выстроил в css правила и добавил
th, td {padding 0px 0px;} методом научного тыка я подставил цифры и выбил 100%.
p.s.
Пока это самое суровое ИСпытание, причем в курсе выравнивание ячеек прошли вскользь, а в испытании спросили по полной. У меня просьба по возможности добавьте пару заданий по выравниванию ячеек перед испытанием.
Спасибо за помощь.

11

Визуальный подгон под образец не является правильным решением. В большинстве испытаний величины свойств кратны пяти. Если вам приходится подбирать на 1-2px - значит подход неверный.
P.S. Поделитесь ссылочкой на описание примененного вами метода выравнивания. Интересно посмотреть.

12 
<head>
    <meta charset="utf-8">
    <title>Таблица посложнее</title>
</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: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}

th, td {
padding: 10px 10px;
}
caption {
caption-side: bottom;
}

table {
border: 0px solid lightgray;
border-collapse: collapse;
}

th {
border-bottom: 2px solid black;
}

td {
border: 1px solid lightgray;
text-align: left;
}

13

Зачем?

14

забыл удалить