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

AlfaOmega · 31.Октябрь.2014 09:20:13

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

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;
    
}

juwain · 31.Октябрь.2014 09:46:31

было
<td>273<td>

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

AlfaOmega · 31.Октябрь.2014 09:49:18

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

nat · 25.Ноябрь.2014 21:35:36

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

elemeNtk0 · 26.Ноябрь.2014 03:31:20

Визуально-то у Вас может и не отличается.
Попробуйте убрать у 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;}

nat · 26.Ноябрь.2014 11:00:04

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

Gromozeka · 03.Январь.2015 10:39:23

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

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;
}

Leo · 03.Январь.2015 11:25:09

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

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

Gromozeka · 03.Январь.2015 11:29:28

Вот 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>

Leo · 03.Январь.2015 11:36:02

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

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

Leo · 03.Январь.2015 11:41:41

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

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

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

Gromozeka · 03.Январь.2015 12:26:40

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

Ivan_Taniukhin · 26.Январь.2015 14:51:41

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

<!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;
}

juwain · 26.Январь.2015 17:57:18

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

Amnesiac · 11.Март.2015 21:22:45

Amnesiac:

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

<!DOCTYPE html>
<html>
<head>
<title>Таблица посложнее</title>
<meta charset=“utf-8”>
</head>
<body>
<table border 1>
<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{
text-align:left;
caption-side:bottom;
}

table{
border-spacing:40px;
border-collapse:collapse;

}
td {
padding: 10px;
border: 1px solid #cccccc;
}

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

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

Таблица посложнее Посещения по городам

Город Посещения Страниц Время

СПБ 199 18,02 00:13:45

Москва 69 нет данных 00:00:44

Киев 5 00:18:07

Всего посещений 273

juwain · 12.Март.2015 08:59:06

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

a11en · 21.Май.2015 14:26:15

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

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;
    }

juwain · 22.Май.2015 08:16:30

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

a11en · 22.Май.2015 08:24:31

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

zawer12 · 25.Июнь.2015 03:40:09

Что не так?

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;
    }

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