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

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

Предположим мы уже создали обычную таблицу:

<table>
   <thead>
      <tr>
         <td>Ниша</td>
         <td>Конверсия, %</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Товары для детей</td>
         <td>3,21</td>
      </tr>
      <tr>
         <td>Парфюмерия и косметика</td>
         <td>2,94</td>
      </tr>
      <tr>
         <td>Магазины продажи товаров различных групп</td>
         <td>1,76</td>
      </tr>
   </tbody>
</table>

И на данном этапе без оформления она у нас выглядит следующим образом:

Вот и пришло время прибегнуть к помощи нашего CSS фреймфорка.

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

Для того, чтобы подключить Bootstrap оформление к созданной нами таблице в самом минимальном варианте необходимо присвоить тегу table соответствующий класс:

<table class="table">

После внесения данных изменений в код таблица примет следующий вид:

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

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

Таблица с чередующимися строками

Добавляя к table класс .table-striped мы получаем из нашей заготовки симпотичную табличку с чередующимися фонами у строк:

На всякий случай уточню, что в этом случае в код внесены следующие изменения:

<table class="table table-striped">

Таблица с границами

Если на чем-то не устраивает отсутствие вертикальных границ и охота получить просто обычную таблицу с нормальными отступами, то стоит воспользоваться классом .table-bordered.

В результате следующего сочетания:

<table class="table table-bordered">

Получим:

Реагирующие на наведение строки

Чтобы добавить динамичности, да и в целом удобства в обращении с таблицей (лично мне удобнее читать информацию, когда текущая строка подсвечивается), можно воспользоваться классом .table-hover. Он изменяет цвет строки на которую наведен курсор мыши.

<table class="table table-hover">

Компактный вариант

Если кому-то не нравятся слишком большие отступы до границ ячеек или же просто следует уместить больше информации в ограниченном пространстве, то на выручку приходит класс .table-condensed

<table class="table table-condensed">

Ячейки и строки с заданными фонами

При желании мы можем менять фоны у строк и ячеек по своему усмотрению.

Для этого соответствующих тегов (tr, td) можно присваивать классы добавляющие им цвета.

В нашем распоряжении имеется 5 таких классов:

• .active — сероватый фон, цвет используется тот же, что у активных строк в случае применения к таблице класса .table-hover
• .success — приятный салатный цвет фона
• .info — нейтральный, голубоватый оттенок цвета
• .warning — пастельный желтый цвет
• .danger — фон в красных тонах призванный обращать на себя внимание

Чтобы не запутаться давайте доработаем наш исходный код с применением данных классов:

<table class="table">
   <thead>
      <tr class="active">
         <td>Ниша</td>
         <td>Конверсия, %</td>
      </tr>
   </thead>
   <tbody>
      <tr class="success">
         <td>Товары для детей</td>
         <td>3,21</td>
      </tr>
      <tr class="info">
         <td>Парфюмерия и косметика</td>
         <td>2,94</td>
      </tr>
      <tr>
         <td class="warning">Магазины продажи товаров различных групп</td>
         <td class="danger">1,76</td>
      </tr>
   </tbody>
</table>

В результате проделанных манипуляций у нас выйдет следующая картина:

«Отзывчивые» таблицы

Разработчики Bootstrap позаботились о удобстве создания мобильных версий сайтов. Так появились классы делающие элементы дизайна «отзывчивыми».

В случае таблиц это класс .table-responsive, который присваивается РОДИТЕЛЬСКОМУ для table тегу:

<div class="table-responsive">
   <table class="table">
      содержимое
   </table>
</div>

Принцип действия у него следующий- если ширина экрана оказывается меньше 769 пикселей и содержимое таблице не вмещается в отводимое ей пространство, то под ней появляется горизонтальная полоса прокрутки:

Комбинирование классов

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

<table class="table table-striped table-bordered">

Ну а уникальные штрихи можно добавить уже воспользовавшись своим файлом CSS.

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