Bootstrap таблицы для начинающих

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

Стандартные бутстраповские таблицы имеют такое оформление:

Внутренние отступы ячеек.
Нету вертикальных границ, но добавлены серые горизонтальные.

Для этого нужно добавить вашей таблице класс table :

  <table class="table">
    <tbody>
      <tr>
        <th>Имя</th>
        <th>Работа</th>
        <th>Город</th>
      </tr>
      <tr>
        <td>Влад</td>
        <td>Занимаюсь Front end'ом</td>
        <td>Питер</td>
      </tr>
      <tr>
        <td>Андрей</td>
        <td>Back end разработчик</td>
        <td>Минск</td>
      </tr>
      <tr>
        <td>Максим</td>
        <td>Занимаюсь SEO оптимизацией</td>
        <td>Москва</td>
      </tr>
    </tbody>
  </table>

Но их можно улучшить под свои хотелки добавляя определенные классы.

Название класса	Что он делает
`table-striped`	Чередует цвета строк
`table-bordered`	Добавляет ячейкам границы
`table-hover`	Изменяет цвета строк при наведении
`table-condensed`	Уменьшает отступы ячеек
Тут несколько классов	Изменяет фон ячеек (смотрите внизу)
`table-responsive`	Таблица становиться адаптивной

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

Чередование цвета строк

<table class = "table table-striped"> 
  ...
</table>

Этот эффект называют — зебра. Он добавляет серый цвет не четным строкам.

В Internet Explorer 8 и ниже вы не заметите никаких изменений (некоторые функции не используются).

Добавление границ

<table class = "table table-bordered"> 
  ...
</table>

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

Изменение цвета ячеек при наведении

<table class = "table table-hover"> 
  ...
</table>

При наведении на строки их фон будет становиться сероватым. Скажу сразу, увидеть хоть какие-то изменения сложно.

Компактные отступы

<table class = "table table-condensed"> 
  ...
</table>

Ячейки таблицы будут выглядеть меньше из-за уменьшения отступов (paddind). Так можно сделать таблицу компактнее, если мало места.

Фон ячеек

Bootstrap имеет пять стандартных фонов. Вы можете сделать тоже самое создав свой класс с background-color.

Название класса	Что он делает
`active`	Используется когда пользователь навел на строку или ячейку
`warning`	Предупреждение, нужно обратить свое внимание
`info`	Дополнительная информация
`success`	Успешное выполнение
`danger`	Что-то пошло неправильно

Адаптивные таблицы

<div class = "table-responsive">
  <table class = "table">
    ...
  </table>
</div>

Таблица автоматически подстраивается под размер окна. Так если ширина окна не вмещает содержимое внизу появится горизонтальный скрол. На ширине больше таблица выглядит как обычно.