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

Якщо ви не знаєте, що таке Bootstrap, рекомендую вам почати з першого уроку: що таке Bootstrap.

У бутстрапа є можливість додавати оформлення до будь-яких таблиць. Для того, щоб створена вами таблиця була оформлена в стилі Bootstrap, їй потрібно призначити клас table:

<table class="table">

За замовчуванням Bootstrap додає таблицям такий стиль:

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

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

Ім’я Прізвище Пошта
Іван Миколайчук [email protected]
Марія Остапчук [email protected]
Юлія Петренко [email protected]

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

 <table class="table">
 <thead>
 <tr>
 <th>Ім'я</th>
 <th>Прізвище</th>
 <th>Пошта</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Іван</td>
 <td>Миколайчук</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Марія</td>
 <td>Остапчук</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Юлія</td>
 <td>Петренко</td>
 <td>[email protected]</td>
 </tr>
 </tbody>
 </table>

Як бачите, ніяких додаткових маніпуляцій від вас не потрібно. Якщо клас таблиці не призначати, стилі Bootstrap їй призначені не будуть.

Чергування фону в рядках

Клас .table-striped, призначений таблиці, додасть сірий фон її непарним рядкам:

<table class="table table-striped">

Результат:

Имя Прізвище Пошта
Іван Миколайчук [email protected]
Марія Остапчук [email protected]
Юлія Петренко [email protected]

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

Клас .table-bordered додає горизонтальні і вертикальні кордону до всіх блоків вашої таблиці:

<table class="table table-bordered">
Имя Прізвище Пошта
Іван Миколайчук [email protected]
Марія Остапчук [email protected]
Юлия Петренко [email protected]
До речі, у цього уроку є відеоверсія: відеоурок №3: таблиці в Bootstrap.

Підсвічування блоків при наведенні

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

<table class="table table-hover">
Имя Прізвище Пошта
Іван Миколайчук [email protected]
Марія Остапчук [email protected]
Юлія Петренко [email protected]

Компактні відступи

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

<table class="table table-condensed">
Имя Прізвище Пошта
Іван Миколайчук [email protected]
Марія Остапчук [email protected]
Юлія Петренко [email protected]

Контекстні фони блоків

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

Имя Прізвище Пошта
Іван Миколайчук [email protected]
Марія Остапчук [email protected]
Юлія Петренко [email protected]

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

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

Responsive (чуйні) таблиці

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

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

Зверніть увагу: клас потрібно призначити не самій таблиці, а батьківському елементу, в якому вона буде перебувати.

Про те, які ще є компоненти в Bootstrap, ви можете дізнатися з урока №2: з чого він складається і як його налаштувати.

Коменти

T7

а как сразу два стиля применить таблице?
чтоб и 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-*) для таких целей.