Эх-х-х… Я безрукий. Перенес ширину в css - 33%. Все равно не помогло. У меня получается, визуально таблица левее, чем надо, в последнем ряду не отображается нижняя линия(а в мини-браузере отображается), также между ячейками белые пробелы по бокам.
Нет такого свойства.
Ячейкам td тоже надо ширину прописать.
Спасибо! Почти вышло… Только такая проблема - таблица отображается
И? В чем проблема то?)
Ой. Не дописал… Таблица отображается прикрепленной к левому краю, а в образце она немного правее. Из-за этого все отображается ошибкой, хотя сами по себе таблицы идентичны.
Для body внешний отступ не был обнулен. Это уже вы изменили.
Упс, наверное случайно изменил. А какое было начальное значение не подскажите?
В этой теме много исходных кодов. Вы могли и сами посмотреть.
Немного неправильно сказала вам, не во внешнем отступе ошибка, а во внутреннем.
Вот так было: padding: 0 10px;
1 лайк
Спасибо большое за терпение!
Мляяяя только у меня одного мозги дымятся? 3 раза таблицу от начало до конца прохожу чтобы решить задачку итоговую таблицу, в итоге нифига не могу запомнить,
скажите что не только я такой туповатый, что бы саммоценка не падало
Учитывая сколько вопросов по теме “Таблицы” появляется каждый день, можете не сомневаться - вы далеко не один. Однако не у каждого хватает терпения, чтобы пройти курс несколько раз подряд, как делаете вы.
Не расстраивайтесь, что не сразу все запоминается. Со временем отложится в голове. Продолжайте заниматься.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: итоговая таблица</title>
</head>
<body>
<h1>Итоговая таблица</h1>
<table>
<tr class="cl1">
<th>Город</th>
<th class="cl3">Посещений</th>
<th class="cl4">%</th>
</tr>
<tr>
<td>СПб</td>
<td class="cl5">199</td>
<td class="cl4">65.12</td>
</tr>
<tr class="cl2">
<td>Москва</td>
<td class="cl5">69</td>
<td class="cl4">21.3</td>
</tr>
<tr>
<td>Киев</td>
<td class="cl5">5</td>
<td class="cl4">8</td>
</tr>
<tr class="cl2">
<td colspan="2">Посещений за весь период</td>
<td class="cl4">273</td>
</tr>
</table>
</body>
</html>
======================
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
.cl1 {
border-bottom: 1px solid black;
border-top: 1px solid black;
color: white;
background-color: darkcyan;
}
.cl2 {
background-color: lightyellow;
}
.cl3 {
color: white;
background-color: lightblue;
text-align: center;
}
.cl4 {
text-align: right;
}
.cl5 {
text-align: center;
}
table {
border-collapse: collapse;
}
th {
padding: 10px;
width: 33%;
text-align: left;
border-bottom: 1px solid black;
}
td {
padding: 10px;
width: 33%;
border-bottom: 1px solid lightgray;
}
Голова кипит, в итоге получил 100% соответствия. Но это совсем не грамотно, да?
Если можно укажите на ошибки!
В целом грамотно. Единственное замечание: давайте классам более осмысленные названия.
К чему удобнее всего привязывать названия, ведь в классе часто не один параметр? Поделитесь пжл.!
Называйте объекты. Например, ячейка -.cell, строка - row. То есть название не исходя из свойств, которые будут в правиле описаны, а исходя из того “что это?”.
Добрый вечер, прошу оценить код и дать советы по улучшению.
<body>
<h1>Итоговая таблица</h1>
<table>
<tr class='th'>
<th class='left'>Город</th>
<th class='center th' >Посещений</th>
<th class='right'>%</th>
</tr>
<tr>
<td class='left'>СПб</td>
<td class='center'>199</td>
<td class='right'>65.12</td>
</tr>
<tr class='backgroundtd'>
<td class='left'>Москва</td>
<td class='center'>69</td>
<td class='right'>21.3</td>
</tr>
<tr>
<td class='left'>Киев</td>
<td class='center'>5</td>
<td class='right'>8</td>
</tr>
<tr class='backgroundtd'>
<td colspan='2' class='left'>Посещений за весь период</td>
<td class='right'>273</td>
</tr>
</table>
</body>
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
}
td {
border-bottom: 1px solid lightgray;
padding: 10px;
width: 33%;
}
.backgroundtd {
background-color: lightyellow;
}
.th {
background-color: darkcyan;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
th {
padding: 10px;
color:white;
}
.left {
text-align: left;
}
.center.th {
background-color: lightblue;
text-align: center;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
В принципе ошибок нет. Единственное замечание - обращайте внимание, как выравнивается содержимое ячеек таблицы по умолчанию. Я о том, что td по умолчанию выравнивается по левому краю, а th по центру. Возможно, это поможет вам чуть-чуть сократить код.
точно, можно убрать из .center.th свойство text-align: center;
спасибо, нужно быть внимательным к мелочам
Здравствуйте!
Подскажите, пожалуйста, в чем проблема. 97% не сходится буквы в шапке таблицы.
Тук же, хотел получить рекомендации относительно кода, понимаю что слишкоммногобукв, но не соображу как можно оптимизировать и укоротить.
Заранее спасибо за ответы!
Итоговая таблица
<table>
<tr class="shapka">
<td class ="cit"> Город </td>
<td class = "pos"> Посещений </td>
<td class = "proc"> % </td>
</tr>
<tr class="spb">
<td class="cit"> СПб </td>
<td> 199 </td>
<td class = "proc"> 65.12 </td>
</tr>
<tr class="mos">
<td class="cit"> Москва </td>
<td> 69 </td>
<td class = "proc"> 21.3 </td>
</tr>
<tr class="ki">
<td class="cit"> Киев </td>
<td> 5 </td>
<td class = "proc"> 8 </td>
</tr>
<tr class="pss">
<td class="cit" colspan="2"> Посещений за весь период </td>
<td class = "proc"> 273 </td>
</tr>
</table>
</body>
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
border-collapse:collapse;
}
td {
padding: 10px;
width: 33%;
text-align: center;
}
.cit {
text-align: left;
}
.proc {
text-align: right;
}
.shapka {
color: white;
background-color:darkcyan;
border-top: 1px solid black;
}
.pos {
background-color:lightblue;
}
.mos {
background-color:lightyellow;
border-bottom: 1px solid lightgray;
}
.pss {
background-color:lightyellow;
border-bottom: 1px solid lightgray;
}
.spb {
border-top: 1px solid black;
border-bottom: 1px solid lightgray;
}
.ki {
border-bottom: 1px solid lightgray;
}
Давайте классам осмысленные названия и на какого “транслита”.
В вашем коде не хватает полужирного начертания текста в шапке.
Обратите внимание, у вас в коде два одинаковых правила с разными селекторами:
.mos {
background-color:lightyellow;
border-bottom: 1px solid lightgray;
}
.pss {
background-color:lightyellow;
border-bottom: 1px solid lightgray;
}