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

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

Разберем еще один вариант оформления таблицы. На этот раз будут использоваться не только CSS3 стили, но еще и библиотека JQuery.

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

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

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

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

<table class="styletable aller" style="width: 100%; text-align: center;">
 <thead>
  <tr>
   <th style="background-color: #ec3e31;">Совместимость</th>
   <th>Пиво</th>
   <th>Водка</th>
   <th>Коньяк</th>
   <th>Виски</th>
   <th>Вино</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Пиво</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Водка</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Коньяк</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Виски</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
   <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Вино</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   </tr>
 </tbody>
</table>

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

table{border:1px solid #343434}
table th{background: #118EC7;color:#fff;padding:10px;text-align:center;
border:1px solid #343434;font-weight:100;}
table tr{background:#FFFFFF;}
table tr:nth-child(even){background:rgba(52,52,52,0.06);color:#343434;}
table td{border:1px solid #343434;padding:10px;text-align:center}
table td:nth-child(even){text-align:center}
.hover{background-color:#575757;color:#fff}
.hovercell{background-color:#ec3e31;color:#fff}
.click{background-color:#ec3e31;text-align:center;color:#fff}

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

<link rel="stylesheet" href="/путь до файла stylecsstable.css" type="text/css" />
<script src="/путь до файла jquery.tablehover.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(document).ready(function() {
  $('.styletable').tableHover({
  colClass: 'hover',
  cellClass: 'hovercell', 
  clickClass: 'click' }); });
 </script>