знакомство с таблицами 17/23

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

Имя файла изображения1366×768 146 KB

не удается решить задачу , вроде бы все как нужно , понимаю , что где то есть косячок , но найти не могу , помогите пожалуйста !

2

Уберите оформление таблицы из html-кода. Рамку и тег b.

3

Добрый день !Убрал , безрезультатно , и какое оформление вы имеете ввиду?

4

А что же вы убрали, если сейчас спрашиваете?

5

убрал

6

Хорошо. Исправленный код покажите.

7 
<!DOCTYPE html>
 <html>
  <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>

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

table{
border-collapse:collapse;

}

td{
border:1px solid lightgray;
padding:10px;
}
caption{
caption-side:bottom;}
th{
padding-top:10px;
padding-bottom:10px;
border-bottom:3px solid black;
}

8 
<!DOCTYPE html>
 <html>
  <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>
9

Интересно, а вы здесь что-нибудь видите? Для вставки кода есть кнопка </> на панели сверху.

10

`

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

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

table{
border-collapse:collapse;

}

td{
border:1px solid lightgray;
padding:10px;
}
caption{
caption-side:bottom;}
th{
padding-top:10px;
padding-bottom:10px;
border-bottom:3px solid black;
}`

1 лайк
12

А с какой целью вы задали тегу строки класс и тег <b> в ячейки поместили?

Здесь можно обойтись одним общим паддингом в 10px, иначе получается, что у вас нет боковых отступов, а толщину рамки следует уменьшить до 2px.

13

ура!спасибо!))