1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Делаем красивый вид таблицы как в вк

Автор
waak
написать автору
пожаловаться
ID материала № 56
Авторwaak
CMSuCoz
Просмотров 170
Добавлено 22.10.2018
Комментариев 0

Делаем красивый вид таблицы как в вк

Здравствуйте! Сегодня решил показать вам как сделать вид таблицы как в социальной сети вконтакте
по сути тут нам понадобится лишь таблица стилей в которую нам нужно будет добавить пару строк стилей но я на всякий случай лам вам и html разметку для таблицы что бы вы могли по примеру понять какие теги использовать для получения данного вида

пример таблицы



Код разметки

Код

<div class="tablpr">
  <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>


Немного подробнее о разметки!
как можно видеть она стандартная и в ней нечего нет такого чего нет в обычной таблицы кроме того что я поместил её в блок div class="tablpr"которому указал класс и через него пишу стили для нашей таблицы так же важный момент это тег th именно он выделяется фоновым цветом и текст написанный в нём жирный.

Ну и сами стили которые нам осталось подключить в таблицу стилей в самый конец

Код


.tablpr table {
  width: 100%;
  line-height: 160%;

}

.tablpr table{
  border: 1px solid #e7e8ec;
  border-right: 0;
  border-top: 0;
  padding: 0px;
  margin: 0 auto 10px;
}

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

.tablpr th {
  background-color: #f5f7f8;
  border: 0;
  margin: 0;
  border-top: 1px solid #e7e8ec;
  border-right: 1px solid #e7e8ec;
  padding: 5px;
  text-align: left;
  font-weight: bold;
}


На этом всё!
все вопросы в комментарии!
0 7
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация