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

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

Посмотреть результат

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

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

Класс Описание
.activeПрименяет цвет наведения к определенной строке или ячейке
.successУказывает на успешное или позитивное действие
.warningУказывает предупреждение, которое может потребовать внимания
.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-responsive, вы заставите таблицу прокручиваться горизонтально на небольших устройствах (до 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>              

Посмотреть результат


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok