ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивое оформление таблицы как Вконтакте

Красивое оформление таблицы как Вконтакте

Красивое оформление таблицы как Вконтакте
В этой небольшой статье научитесь создавать адаптивную таблицу HTML + CSS, которая по своему дизайну схожа как на социальном сайте Вконтакте. Суть стилистики состоит в том, что с начало создаем основу на HTML, где в продолжение прописываем класс, и все для того, чтоб как нужно оформить по цветовой гамме. Также она отлично смотрится на всех мобильных аппаратах, ведь полностью адаптивна, что корректно просматривается с большого монитора, и аналогично с небольшого экрана.

Как можно заметить, что ней не чего сложного нет, разве только нам нужно разместить class="krasivoye-oformleniye", где через этот класс можно задавать свою форму под разные значение, а также вписывать оттенки цвета. И разумеется еще один из важных моментов, как th именно он выделяется фоновая стилистика, где будет прописывать текст под разные значения.

Так выглядит таблицу при установки:

Таблица с данными для сайтов

Устанавливаем:

HTML

Код
<div class="krasivoye-oformleniye">
  <table cellpadding="0" cellspacing="0" ><tbody>
  <tr>
  <td>Наименование товара </td>
  <td><center>до 5 картин</center> </td>
  <td><center>от 5 картин</center> </td>
  </tr>
  <tr>
  <th><center>Картины по номерам</center> </th>
  <th> </th>
  <th> </th>
  </tr>
  <tr>
  <td>40х50 </td>
  <td><center>500,00</center> </td>
  <td><center>350,00</center> </td>
  </tr>
  <tr>
  <td>30х40 </td>
  <td><center>450,00</center> </td>
  <td><center>330,00</center> </td>
  </tr>
  <tr>
  <td>20х30 </td>
  <td><center>400,00</center> </td>
  <td><center>310,00</center> </td>
  </tr>
  <tr>
  <td>—-— </td>
  <td><center>-----</center> </td>
  <td><center>-----</center> </td>
  </tr>
  </tbody>
</table>
</div>

CSS

Код
.krasivoye-oformleniye table {
  width: 100%;
  line-height: 160%;

}

.krasivoye-oformleniye table{
  border: 1px solid #ececec;
  border-right: 0;
  border-top: 0;
  padding: 0px;
  margin: 0 auto 10px;
}

.krasivoye-oformleniye td {
  border-top: 1px solid #c7c7c7;
  border-right: 1px solid #c7c7c7;
  vertical-align: top;
  padding: 5px;
  margin: 0;
}

.krasivoye-oformleniye th {
  background-color: #e9eef1;
  border: 0;
  margin: 0;
  border-top: 1px solid #dedede;
  border-right: 1px solid #e2e2e2;
  padding: 5px;
  text-align: left;
  font-weight: bold;
}

На этом установочный процесс завершен!
Источник: Talantlev.ucoz.ru
Демонстрация
19 Ноября 2020 Загрузок: 3 Просмотров: 1520 Комментариев: (3)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 3
Kosten
Kosten 21 Ноября 2020 02:001
0
Чтоб не заблуждались, сама таблица при установки выглядит, как в материале изображение поставлено, а не как на афише, но с другой стороны можно по своему выстроить.
waak
waak 21 Ноября 2020 21:152
0
Данный код просто меняет вид таблиц то-есть просто меняет стилистику и если убрать класс krasivoye-oformleniye то html код не нужен по сути и достаточно просто вставить код стилей на сайт и все таблицы примут данную стилистику если только вы конкретно не меняли ту или иную стилистику у конкретной таблицы на сайте

Так что исходя из этого вы можете просто создать таблицу используя стандартные функции сайтов на юкоз и они будут иметь стилистику как показано в примере
Kosten
Kosten 22 Ноября 2020 03:013
0
Здесь можно самостоятельно эту таблицу оформить, это добавить цветовую гамму, не исключаю увидеть шрифтовые кнопки.
Войдите:
avatar