Bootstrap Таблицы

Bootstrap предоставляет понятную разметку для создания таблиц. В следующей таблице перечислены некоторые элементы таблиц, поддерживаемые Bootstrap:

ТегОписание
<table>Добавляет базовое оформление к таблице.
<thead>Элемент-контейнер для строки заголовка таблицы (<tr>), используемый для идентификации столбцов таблицы.
<tbody>Элемент-контейнер для строк таблицы (<tr>) в теле таблицы.
<tr>Элемент-контейнер для группы ячеек таблицы (<td> или <th>), которые располагаются в одной строке.
<td>Ячейка таблицы по умолчанию.
<th>Специальная ячейка таблицы, используемая для идентификации столбца или строки (в зависимости от scope и позиции). Должна использоваться внутри <thead>.
<caption>Описание или краткое изложение содержимого, хранящегося в таблице.

Классы таблиц

В таблицах можно использовать следующие стили таблиц:

Класс Описание Пример
.table Добавляет базовое оформление к любой <table> (только горизонтальные разделители) Попробуйте
.table-striped Добавляет чередующуюся заливку строк внутри <tbody> (IE8 не поддерживается) Попробуйте
.table-bordered Добавляет границы ко всем ячейкам таблицы. Попробуйте
.table-hover Включает состояние наведения для любой строки внутри <tbody> Попробуйте
.table-condensed Делает таблицу более компактной. Попробуйте
Объедините все классы таблицы. Попробуйте

Классы <tr>, <th> и <td>

Классы в таблице ниже можно использовать для строк или ячеек таблицы:

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

Базовая таблица

Если вам нужна базовая таблица только с отступами и горизонтальными разделителями, добавьте класс.table, как показано в примере ниже:

Пример

<table class="table"> <caption>Базовая разметка таблицы</caption> <thead> <tr> <th>Имя</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>Танмай⟦⟧td</td> <td>Бангалор</td> </tr> <tr> <td>Сачин</td> <td>Мумбаи</td> </tr> </tbody> </table>

Попробуйте »

Результат показан ниже:

基本的表格

Дополнительные классы таблиц

В дополнение к базовой разметке таблицы и `.table`, есть также некоторые, которые можно использовать для стилизации разметки. Эти классы:

Полосатая таблица

С помощью класса.table-stripedвы увидите полосы на строках в <tbody>, как показано в примере ниже:

Пример

<table class="table table-striped"> <caption>Разметка полосатой таблицы</caption> <thead> <tr> <th>Имя</th> <th>Город</th> <th>Почтовый индекс</th> </tr> </thead> <tbody> <tr> <td>Танмай⟦⟧td</td> <td>Бангалор</td> <td>560001</td> </tr> <tr> <td>Сачин</td> <td>Мумбаи</td> <td>400003</td> </tr> <tr> <td>Ума</td> <td>Пуна</td> <td>411027</td> </tr> </tbody> </table>

Попробуйте »

Результат показан ниже:

条纹表格

Таблица с границами

Добавив.table-borderedкласс, вы увидите границы вокруг каждого элемента, и вся таблица будет закруглена, как показано в примере ниже:

Пример

<table class="table table-bordered"> <caption>Макет таблицы с границами</caption> <thead> <tr> <th>Имя</th> <th>Город</th> <th>Почтовый индекс</th> </tr> </thead> <tbody> <tr> <td>Танмай⟦⟧td</td> <td>Бангалор</td> <td>560001</td> </tr> <tr> <td>Сачин</td> <td>Мумбаи</td> <td>400003</td> </tr> <tr> <td>Ума</td> <td>Пуна</td> <td>411027</td> </tr> </tbody> </table>

Попробуйте »

Результат показан ниже:

边框表格

Таблица с наведением

Добавив.table-hoverкласс, при наведении указателя на строку появится светло-серый фон, как показано в примере ниже:

Пример

<table class="table table-hover"> <caption>Макет таблицы при наведении</caption> <thead> <tr> <th>Имя</th> <th>Город</th> <th>Индекс</th> </tr> </thead> <tbody> <tr> <td>Танмай⟦⟧td</td> <td>Бангалор</td> <td>560001</td> </tr> <tr> <td>Сачин</td> <td>Мумбаи</td> <td>400003</td> </tr> <tr> <td>Ума</td> <td>Пуна</td> <td>411027</td> </tr> </tbody> </table>

Попробуйте сами »

Результат следующий:

悬停表格

Компактная таблица

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

Пример

<table class="table table-condensed"> <caption>Макет компактной таблицы</caption> <thead> <tr> <th>Имя</th> <th>Город</th> <th>Индекс</th></tr> </thead> <tbody> <tr> <td>Танмай⟦⟧td</td> <td>Бангалор</td> <td>560001</td></tr> <tr> <td>Сачин</td> <td>Мумбаи</td> <td>400003</td></tr> <tr> <td>Ума</td> <td>Пуна</td> <td>411027</td></tr> </tbody> </table>

Попробуйте сами »

Результат следующий:

精简表格

Контекстные классы

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

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

Эти классы можно применять к <tr>, <td> или <th>.

Пример

<table class="table"> <caption>Контекстная разметка таблицы</caption> <thead> <tr> <th>Товар</th> <th>Дата платежа</th> <th>Статус</th></tr> </thead> <tbody> <tr class="active"> <td>Товар 1</td> <td>23/11/2013</td> <td>Ожидает отправки</td></tr> <tr class="success"> <td>Товар 2</td> <td>10/11/2013</td> <td>Доставка</td></tr> <tr class="warning"> <td>Товар 3</td> <td>20/10/2013</td> <td>Ожидает подтверждения</td></tr> <tr class="danger"> <td>Товар 4</td> <td>20/10/2013</td> <td>Возвращён</td></tr> </tbody> </table>

Попробуйте сами »

Результат следующий:

上下文类

Адаптивная таблица

Обернув любой.tableв.table-responsiveclass, вы можете заставить таблицу прокручиваться по горизонтали, чтобы она помещалась на маленьких устройствах (менее 768px).

Пример

<div class="table-responsive"> <table class="table"> <caption>Адаптивный макет таблицы</caption> <thead> <tr> <th>Товар</th> <th>Дата платежа</th> <th>Статус</th></tr> </thead> <tbody> <tr> <td>Товар 1</td> <td>23/11/2013</td> <td>Ожидает отправки</td></tr> <tr> <td>Товар 2</td> <td>10/11/2013</td> <td>Отправка</td></tr> <tr> <td>Товар 3</td> <td>20/10/2013</td> <td>Ожидает подтверждения</td></tr> <tr> <td>Товар 4</td> <td>20/10/2013</td> <td>Возвращено</td></tr> </tbody> </table> </div>

Попробуйте сами »

Результат следующий:

响应式表格
Другие расширения