Bootstrap - Таблицы

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

Sr. No. Тег и описание
1

<table>

Элемент упаковки для отображения данных в табличном формате

2

<thead>

Элемент контейнера для строк заголовков таблицы (<tr>) для маркировки столбцов таблицы.

3

<tbody>

Элемент контейнера для строк таблицы (<tr>) в теле таблицы.

4

<tr>

Элемент контейнера для набора ячеек таблицы (<td> или <th>), который отображается в одной строке.

5

<td>

Ячейка таблицы по умолчанию.

6

<th>

Специальная ячейка таблицы для меток столбцов (или строк, в зависимости от области действия и размещения). Должен использоваться в <thead>

7

<caption>

Описание или сводка того, что содержит таблица.

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

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

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

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

Наряду с разметкой базовой таблицы и классом .table есть несколько дополнительных классов, которые можно использовать для стилизации разметки. Следующие разделы дадут вам представление обо всех этих классах.

Полосатый стол

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

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

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

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

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Стол при наведении

При добавлении класса .table-hover к строкам будет добавлен светло-серый фон при наведении курсора на них, как показано в следующем примере:

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Сводная таблица

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

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

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

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

Sr. No. Класс и описание
1

.active

Применяет цвет наведения к определенной строке или ячейке

2

.success

Указывает на успешное или положительное действие

3

.warning

Указывает на предупреждение, которое может потребовать внимания

4

.danger

Указывает на опасное или потенциально негативное действие

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

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Адаптивные таблицы

К оберточным любому .table в .table реагирующего класса, вы будете делать таблицы прокрутки по горизонтали до небольших устройств (под 768px). При просмотре на объектах шириной более 768 пикселей вы не увидите никакой разницы в этих таблицах.

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>