» »

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

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

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

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

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

Приступаем к установке:

Таблица с раздельными как вконтакте

Таблица с раздельными как вконтакте

HTML

Код
<div class="vidtablits-akaga">  
  <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>78х88 </td>  
  <td><center>745,00</center> </td>  
  <td><center>535,00</center> </td>  
  </tr>  
  <tr>  
  <td>95х120</td>  
  <td><center>780,00</center> </td>  
  <td><center>570,00</center> </td>  
  </tr>  
  <tr>  
  <td>1275х1570 </td>  
  <td><center>755,00</center> </td>  
  <td><center>570,00</center> </td>  
  </tr>  
  <tr>  
  <td>Пробел</td>  
  <td><center>Пробел</center> </td>  
  <td><center>Пробел</center> </td>  
  </tr>  
  </tbody>  
</table>  
</div>

CSS

Код
.vidtablits-akaga table {  
  width: 100%;  
  line-height: 160%;  
box-shadow: 0px 7px 19px rgba(64, 62, 62, 0.19), 0px 6px 16px -15px rgba(21, 20, 20, 0.51);

}  

.vidtablits-akaga table {
  border: 1.5px solid #d7d8da;
  border-right: 0;
  border-top: 0;
  padding: 0px;
  margin: 0 auto 10px;
}

.vidtablits-akaga td {
  border-top: 1.5px solid #e2e0e0;
  border-right: 1.5px solid #e4e4e4;
  vertical-align: top;
  padding: 7px;
  margin: 0;
  font-style: italic;
  font-weight: 700;
  background: #ffffff;
  color: #383333;
}

.vidtablits-akaga th {
  background-color: #dee4e6;
  border: 0;
  margin: 0;
  border-top: 1.5px solid #d4d0d0;
  border-right: 1.5px solid #dee4e6;
  padding: 5px;
  text-align: left;
  font-weight: bold;
}

Здесь представлена одна из многих структур, так как базы данных бывают разных форм и размеров, это смотря под какую тематику нужно выставлять.

Источник: Talantlev.net
Демонстрация

Цветное оформление таблицы

Цветное оформление таблицы

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

А так такое оформление блоков можно много где использовать, это как размещение разного описание, от категорий сайта до материалов.

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

HTML

Код
<div class="pecialevelav">  
  <div class="understan-dablespecia">Синяя таблица</div>  
  <div class="manyquestions">Здесь описание любого характера.
  </div>  
  </div>

CSS

Код
.pecialevelav {
  border: 1px solid #7dacc5;
  background: #e4e6e8;
  box-shadow: 0px 2px 8px 0px rgba(40, 64, 84, 0.49), 1px 3px 8px -15px rgba(31, 28, 28, 0.13);
}
.understan-dablespecia {
  background: #aecdde;
  padding: 10px;
  border-bottom: 1px solid #74a2bb;
  font-weight: bold;
  font-size: 13px;
  font-family: tahoma;
  color: #123548;
  text-shadow: 1px 1px 0px #e8e5e5;
  box-shadow: 0px 3px 8px 0px rgba(74, 117, 154, 0.31), -1px 8px 8px -15px rgba(43, 42, 42, 0);
}  
  .manyquestions {
  padding:7px;  
  font-family:tahoma;
  font-size:12px;  
}

По сути используя обе таблицы, где по второй вариаций вы изначально оформите красивее свой сайт. А первая идет чисто под информацию, где в большинстве не сильно оформление проводят, ведь главное, это данные что прописаны.

Демонстрация

Таблица с разделами строк

Таблица с разделами строк

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

HTML

Код
<table class="kusanouso-meygokesea">
  <thead>
  <tr>
  <th>№</th>  
  <th>ZorNet - портал для вебмастера</th>
  <th>Год</th>
  </tr>
  </thead>
  <tr>
  <td>1</td>  
  <td>Красивые таблицы на CSS</td>
  <td>2017</td>
  </tr>  
  <tr>
  <td>2</td>  
  <td>
Слайдер в стиле карусель на jQuery</td>
  <td>2018</td>
  </tr>
  <tr>
  <td>3</td>  
  <td>
Информационные блоки для форума</td>
  <td>2015</td>
  </tr>  
  <tr>
  <td>4</td>  
  <td>
Адаптивная карусель слайдера</td>
  <td>2017</td>
  </tr>
  <tr>
  <td>5</td>  
  <td>
Текстовой слайдер с описанием</td>
  <td>2014</td>
  </tr>
   
</table>

CSS

Код
.kusanouso-meygokesea {
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 1px #9c9999;
  -moz-box-shadow: 0 1px 1px #ccc;
  box-shadow: 0 1px 1px #a9a1a1;
  box-shadow: 0px 0px 5px 1px #4e4a4a;
}
   
.kusanouso-meygokesea tr:hover {
  background: #e6e6e3;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor:pointer;
}  
   
.kusanouso-meygokesea td, .kusanouso-meygokesea th {
  border-left: 1px solid #b2d5e2;
  border-top: 1px solid #c6e4ff;
  padding: 8px;
  text-align: left;
}
   
.kusanouso-meygokesea th {
  background-color: #a9c6ea;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ced1d4), to(#b2cae6));
  background-image: -webkit-linear-gradient(top, #e2e2e2, #6a93c5);
  -webkit-box-shadow: 0 1px 0 rgba(228, 217, 217, 0.8) inset;
  box-shadow: 0 1px 0 rgba(180, 184, 189, 0.79) inset;
  border-top: none;
  text-shadow: 0 1px 0 rgba(243, 243, 243, 0.5);
}
   
.kusanouso-meygokesea td:first-child, .kusanouso-meygokesea th:first-child {
  border-left: none;
}
   
.kusanouso-meygokesea th:first-child {
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0;
}
   
.kusanouso-meygokesea th:last-child {
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
  border-radius: 0 6px 0 0;
}
   
.kusanouso-meygokesea th:only-child{
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}
   
.kusanouso-meygokesea tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 6px;
  -webkit-border-radius: 0 0 0 6px;
  border-radius: 0 0 0 6px;
}
   
.kusanouso-meygokesea tr:last-child td:last-child {
  -moz-border-radius: 0 0 6px 0;
  -webkit-border-radius: 0 0 6px 0;
  border-radius: 0 0 6px 0;
}

Некоторые ставят под блоки, что отлично получается, но здесь безусловно с дизайн нужно поработать. Были добавлены тени, как внутренние, и для каркаса, что на изображение можно посмотреть, а вот на demo страницы теней нет, что можно сравнить.

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

Демонстрация
2019-01-27 Загрузок: 1 Просмотров: 349 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 2019-01-27 01:451
0
Если смотреть демонстрацию, то там идет по умолчанию, здесь уже немного доработан в плане оформление, что по скринам можно сравнить, так как изображение полностью соответствует материалу по установке.
avatar