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

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

В оформлении таблицы нам помогут незаменимые помощники любого веб-мастера - CSS стили.

Пример оформления таблицы

HTML разметка таблицы

zebra - заданный класс таблицы, определяющий её оформление;
width: 100% - свойство, делающее таблицу адаптивной для различных размеров экрана;
text-align: center - свойство, выравнивающее текст таблицы по центру.

<table class="zebra" style="width: 100%; text-align: center">
 <thead>
  <tr>
   <th>Наименование услуги</th>
   <th>Стоимость</th>
   <th>Сроки</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Создание сайта визитной карточки</td>
   <td>5.000 руб.</td>
   <td>2-4 рабочих дня</td>
  </tr>
  <tr>
   <td>Создание блога</td>
   <td>8.000 руб.</td>
   <td>4-7 рабочих дней</td>
  </tr>
  <tr>
   <td>Создание интернет-магазина</td>
   <td>11.000 руб.</td>
   <td>7-10 рабочих дней</td>
  </tr>
  <tr>
   <td>Создание Landing Page</td>
   <td>8.000 руб.</td>
   <td>4-7 рабочих дней</td>
  </tr>
  <tr>
   <td>Доработки проектов</td>
   <td>от 300 руб за задание</td>
   <td>Сроки индивидуальны</td>
  </tr>
 </tbody>
</table>

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

.zebra caption{font-size:20px;font-weight:400;background-repeat:no-repeat;
background-position:130px center;padding-top:20px;height:50px}
.zebra{border:1px solid #343434}
.zebra td{border-left:1px solid #343434;border-top:1px solid #343434;padding:10px;}
.zebra th,.zebra th:hover{border-left:1px solid #343434;border-bottom:1px solid #343434;
padding:20px;background-color:#118EC7!important;color:#FFF!important;font-weight:400}
.zebra tbody tr:nth-child(even){background:rgba(52,52,52,0.06);color:#343434}
.zebra tr:hover *{background:#FBF4E9;color:#343434}
.zebra tr{color:#343434}

Видео инструкция по оформлению таблицы при помощи CSS3

<link rel="stylesheet" href="/путь до файла stylecsstablezebra.css" type="text/css" />