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

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

Добрый день.
Подскажите , пожалуйста, с итоговым заданием по таблицам.
не совсем понятно, как подогнать первый tr под образец. И “%” убегает влево, хотя указал форматировать текст в этой ячейке под правую сторону.

5

html

   <h1>Итоговая таблица</h1>
  <table>
    <tr class="white">
    <td class="darkcyan" class="right">Город</td>
    <td class="lightblue" class="middle">Посещений</td>
    <td  class="darkcyan" class="left">%</td>
    </tr>
    <tr>
    <td class="right" >СПб</td>
    <td class="middle" >199</td>
    <td class="left" >65.12</td>
    </tr>
    <tr class="yellow">
    <td class="right">Москва</td>
    <td class="middle">69</td>
    <td class="left">21.3</td>
    </tr>
    <tr>
    <td class="right">Киев</td>
    <td class="middle">5</td>
    <td class="left">8</td>
    </tr>
    <tr class="yellow">
    <td class="right" colspan="2">Посещений за весь период </td>
    <td class="left">273</td>
    </tr>

</body>
6 
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%;
}

.right {
padding-left: 10px;
text-align:left;
}
.middle {
text-align:center;
}
.left {
text-align:right;
}
.yellow {
background-color:lightyellow;
}
.darkcyan {
background-color:darkcyan;
}

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

7

Если нужно использовать два класса для одного элемента, то классы пишутся через пробел в одном атрибуте class.

8

Вы правы, не заметил. Спасибо.
но вот вопрос с первым тегом

остается открытым и после правильного оформления классов
9

А закрывающий тег </table> есть у вас? Просто судя по коду в сообщении - нету.

10

Есть, не зацепил при копировании. Но при отсутствии ничего не изменится

11

Есть небольшая проблема с рамкой снизу. Самый выгодный для вас вариант - это использовать в первой строке вместо td - th.

12

Хмм…Не совсем понятно почему не работает с тегом td, но это помогло. Видимо, th лучше всегда использовать при таких “заголовочных” ячейках. Спасибо, заветная соточка!)

1 лайк