Испытание: таблица посложнее [17/23] Выполнение (99%)

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

Подскажите, как убрать лишнюю ячейку, которая появилась в последней строке.

HTML

<!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:0 10px;
    font-size:11px;
    font-family:"Arial";
}
caption{
    border-collapse:collapse;
    caption-side:bottom;
    text-align:left;
}
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 #ccc;
    
}
#2

было
<td>273<td>

стало
<td>273</td>

2 симпатии
#3

Благодарю! Не досмотрел.

#4

в этом задании (таблица посложнее) опять что-то не так. при наложении результат не отличается, но проверка не проходит…

#5

Визуально-то у Вас может и не отличается.
Попробуйте убрать у table бордер и добавьте его для TD и уберите верхнюю границу у ячейки
B th уберите белый border вообще =)

Смотрите сюда в последнюю очередь)

table {border-collapse:collapse;}
caption {caption-side:bottom; text-align:left;}
td,th {padding:10px;}
th {border-bottom:2px solid black;}
td {border:1px solid #ccc;border-top:none;}
#6

спасибо!!! все получилось)

#7

Может подскажете что у меня не так? В шапке нет жирной строки.

body{
width:260px;
margin:0;
padding:0 10px;
font-size:11px;
font-family:“Arial”;
}
caption{
caption-side:bottom;
text-align:left;
}
table {
border-collapse:collapse;
}
th{
border-bottom:2px solid black;
padding:10px;
}
td{
padding:10px;
border:1px solid #ccc;border-top:none;
}

#8

Вроде, в CSS всё верно, видимо, проблема где-то именно в HTML-разметке.

Дайте HTML-код, а то на скрине толком ничего не видно, всё слишком мелко.

#9

Вот HTML

<body>
    <table>
       <caption>Посещения по городам</caption>
         <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 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>
#10

У вас в CSS используется селектор «th», но на самом деле в коде его нет. Нужно в HTML в первой строке таблицы все «td» заменить на «th». Это для того, чтоб появилась необходимая жирная линия. Вроде так.

P.S.: Вроде бы в решении ещё что-то не так с отступами, сейчас попробую разобраться.

1 симпатия
#11

Нет, пардон, в остальном вроде всё как надо.

Достаточно поменять участок с первой строкой как-то так:
<tr> <th>Город</th> <th>Посещения</th> <th>Страниц</th> <th>Время</th> </tr>

На всякий случай код выложил: codepen.io. Показывает с ним результат в сотку.

1 симпатия
#12

Точно. Невнимательность. Все получилось. Спасибо )

#13

Не могу понять в чем проблема. изуально все так, но не проходит проверку.
Код:

<!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:260px;
margin:0;
padding:0 10px;
font-size:11px;
font-family:"Arial";
}
caption {
caption-side: bottom; 
text-align: left; 
}

table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #cccccc;
}
th {
padding: 10px;
border-bottom:3px solid black;
}
#14

Сделайте у ячеек заголовка нижнюю границу 2px вместо 3px. Из-за этой границы «сдвигаются» остальные элементы, и поэтому картинки образца и результата не совпадают. Проверяйте результат во вкладке «Различия» мини-браузера.

#15

Не могу понять почему не переходит на следующее задание?? :weary:

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

[quote=“Amnesiac, post:15, topic:2222”]
<table border 1>
[/quote]Проблема в этой строке.

1 симпатия
#17

Здравствуйте! Подскажите, пожалуйста, что не так - заголовок таблицы не перемещается вниз. Заранее спасибо!

HTML

<!DOCTYPE html>
<html>
    <head>
       <title>Таблица посложнее</title>
       <meta charset="utf-8">
    </head>
    <body>
    <table>
          <captoin>Посещения по городам</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:0 10px;
        font-size:11px;
        font-family:"Arial";
    }
    table{
        border-collapse:collapse;
    }
    caption{
        caption-side:bottom;
        text-align:left;
    }
    td{
        border:1px solid #ccc;
        padding:10px;
    }
    th{
        padding:10px;
        border-bottom:2px solid black;
    }
#18

Всего лишь синтаксическая ошибка :wink:

#19

:smile: Спасибо большое!! :relaxed:

1 симпатия
#20

Что не так?

body{
    width:260px;
    margin:1;
    padding:1 10px;
    font-size:11px;
    font-family:"Arial";
}
table{
    border-collapse:collapse;
    }
caption{
    caption-side:bottom;
    text-align:left;
    }
th{
    padding:10px;
    border-bottom:2px solid black;
    }
td{
    border:1px solid #cccccc;
    padding:10px;
    }