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: Таблица становиться адаптивной

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

Интересное

Последние новости в мире программирования

Самые свежие новости и полезные материалы в моем telegram канале.

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

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

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

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

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

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

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

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

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

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

Интересное

Последние новости в мире программирования

Самые свежие новости и полезные материалы в моем telegram канале.

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

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

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

Фон ячеек

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

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

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

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

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

Добавление этого класса идет к блоку div, который является родительским для таблицы