форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
22-10-2018 в 00:41 214

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


Делаем красивый вид таблицы как в вк
Здравствуйте! Сегодня решил показать вам как сделать вид таблицы как в социальной сети вконтакте
по сути тут нам понадобится лишь таблица стилей в которую нам нужно будет добавить пару строк стилей но я на всякий случай лам вам и 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;
}


На этом всё!
все вопросы в комментарии!

10

Комментарии

Комментариев пока нет!
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru