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

Базовый класс таблиц bootstrap

Базовым классом таблиц является class=“table”. Достаточно добавить его в <table> и создаются отступы и горизонтальные разделители секций.

# Имя Фамилия Пользователь
1 Илья Муромец @illusha
2 Добрыня Никитич @dobr
3 Алеша Попович @aleksiy_popovich
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Пользователь</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Илья</td>
      <td>Муромец</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Добрыня</td>
      <td>Никитич</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Алеша</td>
      <td>Попович</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Это самый простой вид в базовой разметке таблиц. Все стили таблиц которые присутствуют на вашем сайте наследуются в Бутстрап. Заменив класс на .table-dark получим инверсию цвета.

# Имя Фамилия Пользователь
1 Илья Муромец @illusha
2 Добрыня Никитич @dobr
3 Алеша Попович @aleksiy_popovich

Чередование фона в ячейках таблицы

В оформление таблицы можно добавить автоматически чередование фона в строчках: одна строка стандартного белого, следующая с серым фоном (background-color: #f9f9f9;) Чередование фона в строчках таблицы добавит класс .table-striped

# Имя Фамилия Пользователь
1 Илья Муромец @illusha
2 Добрыня Никитич @dobr
3 Алеша Попович @aleksiy_popovich
4 Святогор @svyatogor
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Пользователь</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Илья</td>
      <td>Муромец</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Добрыня</td>
      <td>Никитич</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Алеша</td>
      <td>Попович</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>

Выделение строк таблиц при наведении

Чтобы при наведении курсора на строчку таблицы фон строки выделялся цветом, добавляем к базовому селектору класс .table-hover
В базовом классе используется значение свойства background-color: #f5f5f5; и при желании его можно изменить.

# Имя Фамилия Пользователь
1 Илья Муромец @illusha
2 Добрыня Никитич @dobr
3 Алеша Попович @aleksiy_popovich
4 Святогор @svyatogor
<table class="table table-hover">
…
</table>

Таблица с горизонтальной прокруткой

Когда в таблице много ячеек и просто не обойтись без горизонтальной прокрутки используем класс .table-responsive
Этот класс так же используем если таблица большая и при просмотре на мобильном телефоне без прокрутки не обойтись.

Количество дней в январе
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<table class="table table-responsive">
…
</table>

Выделить цветом строки и ячейки таблицы

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

Type Заголовок колонки Заголовок колонки
Активный (table-active) Ячейка Ячейка
По умолчанию (Default) Ячейка Ячейка
Главный (table-primary) Ячейка Ячейка
Второстепенный (table-secondary) Ячейка Ячейка
Успех (table-success) Ячейка Ячейка
Опасность (table-danger) Ячейка Ячейка
Предупреждение (table-warning) Ячейка Ячейка
Предупреждение (table-info) Ячейка Ячейка
Светлый (table-light) Ячейка Ячейка
Темный (table-dark) Ячейка Ячейка

Применять цвет можно и на целую строчку <tr> и к ячейке. Например, применим цветовую схему primary к ячейке Добрыня

# Имя Фамилия Пользователь
1 Илья Муромец @illusha
2 Добрыня Никитич @dobr
3 Алеша Попович @aleksiy_popovich
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Пользователь</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Илья</td>
      <td>Муромец</td>
      <td>@illusha</td>
    </tr>
    <tr>
      <th>2</th>
      <td class="table-primary">Добрыня</td>
      <td>Никитич</td>
      <td>@dobr</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Алеша</td>
      <td>Попович</td>
      <td>@aleksiy_popovich</td>
    </tr>
  </tbody>
</table>