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

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

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

Категория Разное, Бесплатно
Авторwaak
Просмотры940
Комментарии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;
}

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

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

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

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

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

Меню

Полезно

Комментарии

waak

К сожалению, у меня нет сайта, на котором был бы активен данный модуль, чтобы посмотреть, работает он там или нет.

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал

di dinyslamsinger

От души

23-01-2024 в 16:58 материал

di dinyslamsinger

Работает ты лучший брат спасибо

03-01-2024 в 20:10 материал

waak

Для ваших просьб на сайте есть раздел Мастерская туда нужно писать о том что вам нужно а не в комментариях

30-12-2023 в 12:00 материал

di dinyslamsinger

Я уже установил