Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание стилей таблицы с использованием возможностей CSS3

4 февраля 2016 | Опубликовано в css | Нет комментариев »

Нам нравится использовать тени, закругленные углы, градиенты и другие свойства CSS3. Поэтому иногда мы создаем дизайн в таблице стилей больше, чем в программе Photoshop. Очень важно при создании дизайна учитывать возможности свойств CSS, чтобы готовый сайт быстро загружался и благодаря этому занимал более высокие позиции в поисковой выдаче.

 

 


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

Демонстрация работыСкачать исходный код

Разметка HTML 

Ниже находится минимально необходимый код HTML:

<table class="features-table">
  <thead>
    <tr>
      <td></td>
      <td>Standard</td>
      <td>Professional</td>
      <td>Enterprise</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
      <td>$99</td>
      <td>$199</td>
      <td>$399</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Custom domain</td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
    </tr>
    <tr>
      <td>Advanced control</td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
    </tr>
    <tr>
      <td>Unlimited support</td>
      <td><img src="cross.png" width="16" height="16" alt="cross"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
    </tr>
    <tr>
      <td>User registration</td>
      <td><img src="cross.png" width="16" height="16" alt="cross"></td>
      <td><img src="cross.png" width="16" height="16" alt="cross"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
    </tr>
  </tbody>
</table> 

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

Чтобы было проще обращаться к ячейкам, используются такие элементы, как thead, tfoot и tbody. Ниже будет показано, что с помощью них проще задавать свойства ячейкам без добавления классов рядам и/или ячейкам.

Код CSS 

Для этого примера используются псевдоклассы CSS3, такие как :nth-child(n) и :first-child. Конечно, очень старые браузеры, такие как Internet Explorer версии 8 и ниже не смогут правильно отобразить стили таблицы, но все современные браузеры и многие устаревшие версии без проблем с этим справятся. Браузер Internet Explorer версии 9 отобразит таблицу, но в ней не будет градиентов, как и в браузере Opera Mini. Желательно добавить градиентам приставку производителя -webkit-, чтобы они отображались и в браузере UC Browser for Android.

.features-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;
  background-image: linear-gradient(top, #fff, #eaeaea, #fff);
}

.features-table td {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  white-space: nowrap;
  text-align: center;
}

/*Тело*/
.features-table tbody td {
  text-align: center;
  font: normal 12px Verdana, Arial, Helvetica;
  width: 150px;
}

.features-table tbody td:first-child {
  width: auto;
  text-align: left;
}

.features-table td:nth-child(2),
.features-table td:nth-child(3) {
  background: #efefef;
  background: rgba(144,144,144,0.15);
  border-right: 1px solid white;
}

.features-table td:nth-child(4) {
  background: #e7f3d4;
  background: rgba(184,243,85,0.3);
}

/*Заголовок*/
.features-table thead td {
  font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;
  border-radius-topright: 10px;
  border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea;
}

.features-table thead td:first-child {
  border-top: none;
}

/*Подвал*/
.features-table tfoot td {
  font: bold 1.4em Georgia;
  border-radius-bottomright: 10px;
  border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}
.features-table tfoot td:first-child {
  border-bottom: none;
}

Демонстрация работыСкачать исходный код

Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Catalin Rosu

Смотрите также:




Оставить ответ


5 + = двенадать

Вставить изображение