Назар Токар
Опубліковано: 10 Лютого 2015
Оновлено: 5 Травня 2017

Продолжим серию уроков по самому популярному html/css фреймворку Bootstrap. О том, что такое Bootstrap, и как его правильно подключить, вы можете узнать из предыдущих уроков. Сегодня речь пойдёт о таблицах.

Если вы не знаете, что такое Bootstrap, рекомендую вам начать с первого урока: что такое Bootstrap.

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

<table class="table">

По умолчанию Bootstrap добавляет таблицам такой стиль:

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

Таблица в стандартном оформлении будет выглядеть так:

ИмяФамилияПочта
ИванНиколайчукivan@example.com
МарияИвановаmary@example.com
ЮлияПетренкоjulia@example.com

В результате код таблицы будет таким:

 <table class="table">
 <thead>
 <tr>
 <th>Имя</th>
 <th>Фамилия</th>
 <th>Почта</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Иван</td>
 <td>Николайчук</td>
 <td>ivan@example.com</td>
 </tr>
 <tr>
 <td>Мария</td>
 <td>Иванова</td>
 <td>mary@example.com</td>
 </tr>
 <tr>
 <td>Юлия</td>
 <td>Петренко</td>
 <td>julia@example.com</td>
 </tr>
 </tbody>
 </table>

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

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

Класс .table-striped, назначенный таблице, добавит серый фон её нечётным строкам:

<table class="table table-striped">

Результат:

ИмяФамилияПочта
ИванНиколайчукivan@example.com
МарияИвановаmary@example.com
ЮлияПетренкоjulia@example.com

Вертикальные и горизонтальные границы в ячейках

Класс .table-bordered добавляет горизонтальные и вертикальные границы ко всем ячейкам вашей таблицы:

<table class="table table-bordered">
ИмяФамилияПочта
ИванНиколайчукivan@example.com
МарияИвановаmary@example.com
ЮлияПетренкоjulia@example.com

Кстати, у этого урока есть видеоверсия: видеоурок №3: таблицы в Bootstrap.

Подсветка ячеек при наведении

Класс .table-hover, назначенный таблице, добавит серый фон строкам таблицы при наведении курсора мыши.

<table class="table table-hover">
ИмяФамилияПочта
ИванНиколайчукivan@example.com
МарияИвановаmary@example.com
ЮлияПетренкоjulia@example.com

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

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

<table class="table table-condensed">
ИмяФамилияПочта
ИванНиколайчукivan@example.com
МарияИвановаmary@example.com
ЮлияПетренкоjulia@example.com

Контекстные фоны ячеек

Классы контекста можно применять, чтобы добавить различный цвет фона строкам (<tr>) или ячейкам (<td>) вашей таблицы:

ИмяФамилияПочта
ИванНиколайчукivan@example.com
МарияИвановаmary@example.com
ЮлияПетренкоjulia@example.com

Вы можете использовать пять стандартных классов для оформления фона:

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

Responsive (отзывчивые) таблицы

Класс .table-responsive делает таблицу восприимчивой к размерам экрана, на котором отображается страница. На небольших устройствах (до 769 пикселей по ширине) таблица будет отображаться с горизонтальным скроллом, если не влезает в экран полностью. При отображении на любом экране шире 768 пикселей таблица будет отображаться как обычно.

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

Обратите внимание: класс нужно назначить не самой таблице, а родительскому элементу, в котором она будет находиться.

О том, какие ещё есть компоненты в Bootstrap, вы можете узнать урока №2: из чего он состоит и как его настроить.

← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

6 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

а как сразу два стиля применить таблице?

чтоб и table table-hover было и table responsive одновременно

Автор
Назар Токар

@T7, сколько угдоно классов можно указывать через пробел: table class="table table-hover table"

Александр

Извините еще разок, отвлекаю.Не пойму теперь как совместить ячейки с div ами, аля rowspan=2. Мне нужно соместить "ячейка 1" вот код:

https://www.dropbox.com/s/3ce3jaxgqenkzpj/index.html?dl=0

Александр

Спасибо

Александр

Здравствуйте, у меня такой вопрос: Можно ли bs таблицу разобрать по для мобильников. Т.е. если разрешение меньше 768, нужно избежать горизонтальной прокрутки. И соответственно можно ли все выстроить в один столбец.

Автор
Назар Токар

Если технически вам важно иметь таблицу, то нет. Используйте сетку (col-sm-*) для таких целей.