Испытание: итоговая таблица [23/23] нужна помощь

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

Добрый день! Посмотрите пожалуйста, где может быть ошибка? Окно сверху выдает результат точь в точь схожий с необходимым, однако окно снизу показывает более узкую таблицу.

2017-05-01_14-58-45.png1920×1080 231 KB

2017-05-01_14-58-11.png1920×1080 232 KB

Испытание: итоговая таблица

Итоговая таблица

    <tr>
        <td class="left">СПб</td>         
        <td class="center">199</td>
        <td class="right">65.12</td>
        </tr>
        
    <tr class="whiteclass">
Город Посещений %
Москва 69 21.3
Киев 5 8
Посещений за весь период 273

body {

width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
border-collapse:collapse;
padding: 5px;
}
th {
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color:darkcyan;
color: white;
padding:10px;

}
td {
border-bottom: 1px solid lightgray;
padding:10px;
color: black;

}
.left{
text-align:left;
}
.center{
text-align: center;
}

.right {
text-align: right;
}
.headcenter{
background-color:lightblue;
}
.whiteclass {
background-color:lightyellow;
}

3

В css-коде в правиле для body есть лишние символы (td) - это видно по скрину. Ширину, прописанную в html, лучше перенести в css-код.

1 лайк
4

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

table {
border-collapse: collapse;

}

th {
color: white;
background-color: darkcyan;
width: 33%;
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid black;
}

td {
width: 33%;
padding: 10px;
border-bottom: 1px solid lightgrey;
}

.bgy {
background-color: lightyellow;
}

.alr {
text-align: right;
}

.alc {
text-align: center;
}

.all {
text-align: left;
}

.bg1 {
background-color: lightblue;
}

5 
Вот HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        
        <table>
	<tr>
		<th class="all">Город</th>
		<th class="alc bg1">Посещений</th>
		<th class="alr">%</th>
	</tr>
	
	<tr>
		<td class="all">СПб</td>
		<td class="alc">199</td>
		<td class="alr">65.12</td>	
	</tr>

                              
	<tr class="bgy">
		<td  class="all">Москва</td>
		<td class="alc">69</td>
		<td class="alr">21.3</td>	
	</tr>

	<tr>
		<td class="all">Киев</td>
		<td class="alc">5</td>
		<td class="alr">8</td>	
	</tr>

	<tr class="bgy">
		<td colspan="2" class="all">Посещений за весь период</td>
		<td class="alr">273</td>	
	</tr>
</table>

    </body>
</html>
1 лайк