Bootstrap5 Таблицы
Компонент Table в Bootstrap 5 предоставляет ряд функций и стилей, делая таблицы более простыми в создании, адаптивными и красивыми.
Мы можем легко создавать таблицы с различными стилями, функцией сортировки, пагинацией и адаптивными макетами.
Bootstrap5 Базовые таблицы
В Bootstrap 5 базовая структура для создания таблицы очень проста; вам нужно только использовать стандартные HTML<table>элементы и добавитьtableкласс.
Bootstrap5 использует класс.tableдля установки базового стиля таблицы, как показано ниже:
Пример
<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>
Попробуйте сами »
Полосатая таблица
Добавив класс.table-striped, вы<tbody>увидите полосы на строках внутри, как показано в примере ниже:
Пример
<table class="table table-striped">
<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>
Попробуйте сами »
Таблица с границами
.table-borderedКласс может добавлять границы к таблице.
Пример
<table class="table table-bordered">
<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>
Попробуйте сами »
Таблица с состоянием наведения
.table-hoverКласс может добавить эффект наведения мыши (серый фон) к каждой строке таблицы:
Пример
<table class="table table-hover">
<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>
Попробуйте сами »
Тёмная таблица
.table-darkКласс может добавить чёрный фон к таблице:
Пример
<table class="table table-dark">
<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>
Попробуйте сами »
Тёмная полосатая таблица
Комбинируя.table-darkи.table-stripedклассы, можно создать чёрную полосатую таблицу:
Пример
<table class="table table-dark table-striped">
<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>
Попробуйте сами »
Эффект наведения - Тёмная таблица
Комбинируя.table-darkи.table-hoverклассы, можно задать эффект наведения мыши на тёмной таблице:
Пример
<table class="table table-dark table-hover">
<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>
Попробуйте сами »
Таблица без границ
.table-borderlessКласс может создать таблицу без границ:
Пример
<table class="table table-borderless">
<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>
Попробуйте сами »
Контекстные цветовые классы
С помощью контекстных цветовых классов можно задавать цвета для строк или ячеек таблицы:
Пример
<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Электронная почта</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Успех</td>
<td>Доу</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Опасность</td>
<td>Моу</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Информация</td>
<td>Дули</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Предупреждение</td>
<td>Рефс</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Активный</td>
<td>Активсон</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Вторичный</td>
<td>Secondson</td>
<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Светлый</td>
<td>Angie</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark text-dark">
<td>Тёмный</td>
<td>Bo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Попробуйте сами »
В таблице ниже перечислены описания цветовых классов таблицы:
| Имя класса |
Описание |
| .table-primary |
Синий: указывает на важную операцию |
| .table-success |
Зелёный: обозначает операцию, которую разрешено выполнять |
| .table-danger |
Красный: указывает на опасную операцию |
| .table-info |
Светло-синий: указывает, что содержимое изменилось |
| .table-warning |
Оранжевый: указывает на операцию, требующую внимания |
| .table-active |
Серый: используется для эффекта наведения мыши |
| .table-secondary |
Серый: указывает, что содержимое не очень важно |
| .table-light |
Светло-серый: может быть фоном строк таблицы |
| .table-dark |
Тёмно-серый: может быть фоном строк таблицы |
Цвета заголовка таблицы
Мы также можем задать цвет заголовка таблицы, например.table-darkкласс используется для добавления чёрного фона к заголовку таблицы,.table-lightкласс используется для добавления серого фона к заголовку таблицы:
Пример
<table class="table">
<thead class="table-dark">
<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>
<table class="table">
<thead class="table-light">
<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>
Попробуйте сами »
Небольшая таблица
.table-smКласс используется для создания уменьшенной таблицы путём сокращения отступов:
Пример
<table class="table table-bordered table-sm">
<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>
Попробуйте сами »
Адаптивные таблицы
.table-responsiveКласс используется для создания адаптивных таблиц: когда ширина экрана меньше 992px, создаётся горизонтальная полоса прокрутки; если ширина области просмотра больше 992px, отображается другой эффект (без полосы прокрутки):
Пример
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
<th>Город</th>
<th>Страна</th>
<th>Пол</th>
<th>Пример</th>
<th>Пример</th>
<th>Пример</th>
<th>Пример</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Анна</td>
<td>Питт</td>
<td>35</td>
<td>Нью-Йорк</td>
<td>США</td>
<td>Женский</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
</tr>
</tbody>
</table>
</div>
Попробуйте сами »
Вы можете использовать следующие классы, чтобы отображать полосы прокрутки при указанных ширинах экрана:
| Имя класса |
Ширина экрана |
| .table-responsive-sm |
< 576px |
| .table-responsive-md |
< 768px |
| .table-responsive-lg |
< 992px |
| .table-responsive-xl |
< 1200px |
| .table-responsive-xxl |
< 1400px |
Пример
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
Попробуйте сами »
Другие расширения