Теория
Теория

Испытание: строим таблицу на 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

Испытание: строим таблицу на CSS

Притормози, дружище