Главная / Каталог скриптов для uCoz / Разное, Бесплатно

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

Добавлено 22-10-2018 в 00:41

Категория Разное, Бесплатно
Авторwaak
Просмотры1049
Комментарии1
Понравилось18

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

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

Оставить комментарий

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

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

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал

waak

на все страницы вывести можно скриптом через запрос на персональную страницу пользователя а на странице со списком закладок я вывел так

Код

У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал

pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал

pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js

19-05-2025 в 17:16 материал

waak

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

13-04-2025 в 17:56 материал

pa patali2k

Добрый вечер, не работает, при нажатии на кнопку "в закладки" всплывает маленькая окно загрузка и так и стоит грузит бесконечно

13-04-2025 в 01:45 материал

ch chirianovconstantin

Спасибо буду ждать

18-02-2025 в 23:03 материал

waak

Здравствуйте сейчас нет времени на это но чуть позже сделаю выложу на сайт