создание сайта

Bootstrap таблицы и базовые классы

Таблица — важная часть контента страницы сайта, Bootstrap таблицы адаптивны для разных размеров устройств и просто красиво выглядят. 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; и при желании его можно изменить.

</tr

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

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

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

Количество дней в январе
12345678910111213141516171819202122232425262728293031
<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>

Ⓒ 2012 -2025 Help2Site.com

Sitemap