- Теория
- Теория
Испытание: строим таблицу на CSS
Настало время проверить себя! Вам предстоит превратить разметку с магическими рецептами в CSS-таблицу, не изменяя HTML-код.
В таблице используется рамка толщиной 1px
и следующие цвета:
#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba
В CSS-коде уже есть небольшие подсказки, его не нужно менять. Значения свойств, как обычно, кратны пяти. Удачи!
Картинки в ячейках выровнены горизонтально и вертикально. Подробно этот приём рассмотрен в задании «Выравнивание содержимого в ячейках» части
«Знакомство с таблицами».
Решение
Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.
.formula {
display: table;
margin: 10px;
width: 500px;
border-collapse: collapse;
}
.formula ul {
display: table-row;
}
.formula li {
display: table-cell;
padding: 5px;
border: 1px solid #777777;
vertical-align: middle;
text-align: center;
}
.formula p {
display: table-caption;
margin: 0;
padding: 10px;
caption-side: bottom;
text-align: center;
font-size: 20px;
}
.formula header {
display: table-header-group;
background-color: #ffffff;
}
.formula .content {
display: table-row-group;
}
.content-important {
background-color: #fffebc;
}
.column {
display: table-column;
}
.column-group {
display: table-column-group;
background-color: #b2fdd0;
}
.column-last {
background-color: #ffbaba;
}
Минимальный вид табов
- index.html
HTML
HTML
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%