Bootstrap 3 - Таблицы

На этом уроке Вы научитесь создавать HTML таблицы и оформлять их с помощью CSS классов платформы Twitter Bootstrap 3.

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

Создание таблицы осуществляется посредством тегов языка HTML. После создания таблицы веб-разработчик переходит к её оформлению с помощью написания правил CSS. Данный процесс можно значительно упростить, используя большое количество готовых CSS классов платформы Twitter Bootstrap 3. Процесс оформления таблицы с помощью Twitter Bootstrap осуществляется путём добавления к таблице или к её различным частям (строке, ячейке) соответствующих классов. Задавая те или иные классы, Вы тем самым задаёте то или иное оформление таблицы.

Создание таблицы в HTML начинается с элемента table (<table>...</table>), внутри которого помещают шапку (<thead>...</thead>) и основное содержимое (<tbody>...</tbody>). Далее в элемент thead и tbody помещают строки (<tr>...</tr>). После этого в элементе tr (<tr>...</tr>) создают ячейки с помощью элементов td (<td>...</td>) и th (<th>...</th>), внутрь которых помещают содержимое, которое должно выводиться в этой ячейке. Элемент th (<th>...</th>) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.

HTML - основы создания таблиц

Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:

  • rowspan="N" - объединяет N ячеек по вертикали;
  • colspan="N" - объединяет N ячеек по горизонтали.

Применять данные атрибуты можно для элементов td и th.

Например:

HTML - объединение ячеек таблиц

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Содержимое ячейки</td>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td>Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td rowspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
  </tbody>
</table>

Для указанания названия таблицы используется элемент caption (<caption>...</caption>), который размещается внутри элемента table сразу же после его открывающего тега.

<table>
  <caption>
    Название таблицы
  </caption>
  ...
</table>

Для придания таблицы базового оформления необходимо добавить класс .table к элементу table:

<table class="table">
...
</table>

Например:

<table class="table">
  <thead>
    <tr>
      <th>№ п/п</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Иван</td>
      <td>Чмель</td>
      <td>ivan@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петр</td>
      <td>Щербаков</td>
      <td>petr@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Юрий</td>
      <td>Голов</td>
      <td>yuri@mail.ru</td>
    </tr>
  </tbody>
</table>

Bootstrap 3 - оформление таблицы с помощью класса table

Для выделения нечётных строк основной части таблицы (<tbody>...</tbody>) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table.

<table class="table table-striped">
...
</table>
Внимание: Для оформления таблиц по типу полос "зебры" в Twitter Bootstrap 3 используется селектор :nth-child, который не поддерживается в браузере Internet Explorer 8.

Например:

<table class="table table-striped">
  <thead>
    <tr>
      <th>№ п/п</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Иван</td>
      <td>Чмель</td>
      <td>ivan@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петр</td>
      <td>Щербаков</td>
      <td>petr@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Юрий</td>
      <td>Голов</td>
      <td>yuri@mail.ru</td>
    </tr>
  </tbody>
</table>

Bootstrap 3 - оформление таблицы с помощью класса table-striped

Также вы можете добавлять границы для всех ячеек таблицы, просто добавив дополнительный класс Bootstrap .table-bordered к базовому классу .table.

<table class="table table-bordered">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
        </tr>
    </tbody>
</table>

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента <table>.

<table class="table table-hover">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
        </tr>
    </tbody>
</table>

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

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

<table class="table table-condensed">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
        </tr>
    </tbody>
</table>

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

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

<table class="table">
    <thead>
        <tr>
            <th>№ чека</th>
            <th>Способ платежа</th>
            <th>Дата платежа</th>
            <th>Сумма</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>2803</td>
            <td>Наличные</td>
            <td>04.08.2014</td>
            <td>2005.00</td>
        </tr>
        <tr class="success">
            <td>2804</td>
            <td>Карта VISA</td>
            <td>04.08.2014</td>
            <td>1270.00</td>
        </tr>
        <tr class="info">
            <td>2805</td>
            <td>Наличные</td>
            <td>05.08.2014</td>
            <td>1356.50</td>
        </tr>
        <tr class="warning">
            <td>2806</td>
            <td>Наличные</td>
            <td>05.08.2014</td>
            <td>5200.05</td>
        </tr>
        <tr class="danger">
            <td>2807</td>
            <td>Карта VISA</td>
            <td>06.08.2014</td>
            <td>315.70</td>
        </tr>
    </tbody>
</table>

Выше приведенный пример будет выглядеть примерно так:

№ чека Способ платежа Дата платежа Сумма
2803 Наличные 04.08.2014 2005.00
2804 Карта VISA 04.08.2014 1270.00
2805 Наличные 05.08.2014 1356.50
2806 Наличные 05.08.2014 5200.05
2807 Карта VISA 06.08.2014 315.70

С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки. При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.

<div class="table-responsive"> 
<table class="table table-bordered">
    <thead>
        <tr>
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
            <th>Увлечения</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван</td>
            <td>Чмель</td>
            <td>ivan@mail.ru</td>
            <td>Плавание, бодибилдинг, боевые искусства</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Петр</td>
            <td>Щербаков</td>
            <td>petr@mail.ru</td>
            <td>Европейские танцы, Стрип-денс, Ролики</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Юрий</td>
            <td>Голов</td>
            <td>yuri@mail.ru</td>
            <td>Горный велосипед, скейтборд, катание на квадрацикле</td>
        </tr>
    </tbody>
</table>
</div> 

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail Увлечения
1 Иван Чмель ivan@mail.ru Плавание, бодибилдинг, боевые искусства
2 Петр Щербаков petr@mail.ru Европейские танцы, Стрип-денс, Ролики
3 Юрий Голов yuri@mail.ru Горный велосипед, скейтборд, катание на квадрацикле

В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.

Тег Описание
<table> Контейнер для элементов, определяющих содержимое таблицы
<caption> Заголовок таблицы
<thead> Контейнер для элементов, формирующих «шапку» таблицы
<tbody> Контейнер для элементов, формирующих основную часть таблицы
<tr> Контейнер для ячеек, являющихся элементами одной строки
<th> Специальная табличная ячейка для заголовков столбцов
<td> Табличная ячейка, предназначенная для размещения основных табличных данных


   Bootstrap 0    32074 0

Комментарии (23)

  1. Виктор # 0
    Возможно ли во втором примере, окрасить ячейки с названием столбцов в нужный цвет? Если да то как?
    1. Александр Мальцев # 0
      Для того чтобы окрасить строку с названием столбцов в нужный цвет, необходимо добавить к соответствующий контекстный класс Bootstrap 3 или создать свой.
      Пример с использованием class=«danger» Bootstrap:
      <table class="table table-striped">
        <thead>
          <tr class="danger">
            <th>№ п/п</th>
            <th>Имя</th>
            <th>Фамилия</th>
            <th>E-mail</th>
          </tr>
        </thead>
        <tbody>
          <!--Содержимое tbody-->
        </tbody>
      </table>
      
      Пример с использованием своего класса «mycolor».
      CSS:
      .table>thead>tr.mycolor>th {
      /* Цвет фона */
      background-color: #1d9ae1;
      /* Цвет текста */
      color: #ffffff;
      }
      
      HTML:
      <table class="table table-striped">
        <thead>
          <tr class="mycolor">
          ...
      
      Также можно изменить цвет отдельной ячейки заголовка таблицы в нужный цвет. Для этого необходимо добавить к соответствующий контекстный класс Bootstrap 3 или создать свой класс CSS.
      CSS:
      .table>thead>tr>th.mythcolor1 {
      background-color: red;
      color: #ffffff;
      }
      .table>thead>tr>th.mythcolor2 {
      background-color: blue;
      color: #ffffff;
      }
      /*...*/
      
      HTML:
      <table class="table table-striped">
        <thead>
          <tr>
            <th class="mythcolor1">№ п/п</th>
            <th class="mythcolor2">Имя</th>
            <th class="mythcolor3">Фамилия</th>
            <th class="mythcolor4">E-mail</th>
          </tr>
        </thead>
        <tbody>
          <!--Содержимое tbody-->
        </tbody>
      </table>
      
    2. pupok # 0
      Подскажите пожалуйста как сделать поиск по таблице
      — ввод по одному или группе символов и в таблице оставались только те строки в ячейке или ячейках, которой данная комбинация совпала
      1. Александр Мальцев # 0
        Добрый день.
        Решение на jQuery.
        HTML:
        Найти: <input id="searchText" type="text">
        <button id="findTable" class="btn btn-default">Найти</button>
         <table class="table table-striped">
          ...
         </table>
        
        Код jQuery:
        //если веб-страницы загружена
        $(document).ready(function() {
          //нажата кнопка с id="findTable"
          $("#findTable").click(function(){
            //сохраняем в переменную текст, который нам необходимо найти в таблице
            //из id="searchText"
            var search = $('#searchText').val().toLowerCase();
            //перебираем всем строки таблицы
            $("table tbody tr").each(function (i) {
              //если не нахоим искомый текст
              if ($(this).text().toLowerCase().replace(/\s+/g, '').indexOf(search)==-1)
                //то скрываем
                $(this).hide();
              else
                //иначе показываем
               $(this).show();
            });
          });
        });
        
      2. deny # 0
        спасибо
        1. Ulya # 0
          Здравствуйте, можно ли запихивать навигационную панель в бутстрап?
          На сколько я понимаю поисковикам отвечающим за места в поисковиках, важна и она(навигационная панелька)
          хочу сделать что-то подобное, но в шаблоне плыву.
          www.dragdropsite.com/demo/mpurpose-free-multipurpose-twitter-bootstrap-3-template/
          логотип правда в моем случае более высокий и менюшка прижата вправо. У меня постоянно то менюшка то мнимо-менюшка (язык и другое) убегают к лого

          ================================================================
          высокий_______________________________________________язык корзина авторизация
          высокий_____________________________________________________________________
          лого__________________________главная / продукция / хиты продаж / новости / контакты
          ===============================================================
          1. Александр Мальцев # 0
            Здравствуйте.
            Для этого желательно использовать сетку Bootstrap, а не таблицы.
            1. Андрей # 0
              Здравствуйте! Подскажите пожалуйста, а как можно зафиксировать заголовок адаптивной таблицы. Т.е. что бы у таблицы был скролл по обоим плоскостям, но что бы заголовок пэвсегда оставался на виду. ( перепробывал разные способы, всегда размер полей заголовка не соответствует размерам полей таблицы, максимум, это скролл в обоих плоскостях без заморозки заголовка)
              1. Александр Мальцев # 0
                Здравствуйте, Андрей.
                Взгляните в сторону плагина DataTables для jQuery.
                Там много различных примеров.
                Например, с динамической высотой и прокруткой.
                DataTables (Scroll — vertical, dynamic height)
                1. Андрей # 0
                  Здравствуйте, Александр!
                  Большое Вам спасибо за совет, это именно то, что я искал! Очень хороший плагин! Смотрю и ненарадаюсь!
          2. Сергей # 0
            Добрый день, Александр!
            Спасибо за уроки, все очень доступно и содержательно!
            У меня вопрос: можно ли представить таблицу в виде полосок (допустим цветных) не соединенных между собой по вертикали. В классическом виде таблица — это «сетка», то есть строки разделены линией. А как строки разделить «пустотой» чтобы они, если заполнить их цветным фоном, выглядели отдельными полосами? И возможно ли разделить не только по вертикали но и горизонтально разбить на ячейки? К сожалению так и не смог прикрепить картинку. Спасибо.
            1. Александр Мальцев # 0
              Добавить в CSS следующее правило:
              table tr,td,th {
                border: 2px solid #fff !important; 
              }
              
              1. Сергей # 0
                Вот сказать, что я премного благодарен — так это все равно что ничего не сказать! Огромнейшее спасибо Вам, Александр!!!
            2. Алексей # 0
              Здравствуйте, Александр!
              Возможно ли с Вами обсудить вопрос сотрудничества. Есть ТЗ нуждающееся в реализации. Спасибо.
              1. Сергей # 0
                Здравствуйте подскажите а табличка резиновая? всмысле с мобильной версии будет отображаться нормально? спасибо
                1. Александр Мальцев # 0
                  Да, адаптивная.
                  Например:
                  <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                      <thead>
                       <tr>
                          <th style="width: 150px;">Имя</th>
                          <th>Описание</th>
                       </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Имя 1</td>
                          <td>Описание 1...</td>
                        </tr>
                        <tr>
                          <td>Имя 2</td>
                          <td>Описание 2...</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                2. Stanislav # 0
                  Не написали самого главного, как эту таблицу зафиксировать или придать ячейкам размер. У меня все эти строки расширяются на весь экран, даже если одной задаю размер tyle=«width: 150px;
                  1. Александр Мальцев # 0
                    Если необходимо придать таблицы некоторую ширину лучше сделать так. Обернуть эту таблицу в блок div и уже ему (этому блоку) задать необходимую ширину (и выравнивание):
                    <div class="center-block" style="width: 500px;">
                      <table class="table">
                        ...
                      </table>
                    </div>
                    
                    А если необходимо зафиксировать каждую ячейку, то добавляем ширину каждой ячейки:
                    <th style="width: 150px;">Имя</th>
                    <th style="width: 150px;">Фамилия</th>
                    <th style="width: 150px;">Отчество</th>
                    
                  2. rina # 0
                    Подскажите, пожалуйста, как сделать цветную шапку таблицы с закругленными углами, чтоб были разделены колонки по всей таблице кроме шапки… возможно ли это?
                    1. vlad074 # 0
                      Возможно ли в принципе объединить ячейки таблицы по вертикали, по столбцам, в один блок?
                      Суть вопроса — заставить каждый такой блок работать как «резиновый», обтекая соседние, или уходя вниз за соседний на мобильном экране, не «разрывая строй» по вертикали, так, чтобы ячейки в таком блоке показывались одна за другой, а не одна-за-одной в рамках строки tr.
                      Или проще поменять верстку таблицы на div-структуру, или на таблицу с одним рядом, а в каждую ячейку запихать свою суб-таблицу, или список?
                      1. Александр Мальцев # 0
                        Для объединения ячеек в таблице используются атрибуты: colspan (по горизонтали) и rowspan (по вертикали). Но это Вам вряд ли поможет, т.к. в таблице строка — это строка и она не может располагаться на нескольких строках. Чтобы это осуществить лучше воспользуйтесь блоками div.
                      2. Иван # 0
                        Здравствуйте. Подскажите простой способ зафиксировать шапку в таблице таблица при этом не имеет фиксированной высоты и длины. width:auto; Надо чтобы при прокрутке вниз страницы, thead оставался на месте, а tbody прокручивалось
                        1. Александр Мальцев # 0
                          Здравствуйте. Вы в любом случае должны указать высоту, с помощью которой необходимо ограничить тело таблицы (например, 150px). Ширина таблицы будет зависеть от ширины блока, в который вы её поместили. В этом примере фиксирование шапки HTML таблицы осуществляется с помощью добавления класса table-fixed к элементу table. Ширина ячеек управляется с помощью классов сетки Bootstrap col-xs-* (при необходимости данную опцию можно вынести в CSS).
                          Например, HTML таблица:
                          <table class="table table-fixed">
                            <thead>
                              <tr>
                                <th class="col-xs-2">#</th><th class="col-xs-8">Наименование</th><th class="col-xs-2">Цена</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td class="col-xs-2">1</td><td class="col-xs-8">Хлеб ржаной</td><td class="col-xs-2">23,50 р.</td>
                              </tr>
                              <tr>
                                <td class="col-xs-2">2</td><td class="col-xs-8">Хлеб пшеничный</td><td class="col-xs-2">27,00 р.</td>
                              </tr>
                              <tr>
                                <td class="col-xs-2">3</td><td class="col-xs-8" ">Хлеб новый</td><td class="col-xs-2">33,20 р.</td>
                              </tr>
                              <tr>
                                <td class="col-xs-2">4</td><td class="col-xs-8">Хлеб подольский</td><td class="col-xs-2">27,50 р.</td>
                              </tr>
                              <tr>
                                <td class="col-xs-2">5</td><td class="col-xs-8">Хлеб серый</td><td class="col-xs-2">21,00 р.</td>
                              </tr>           
                            </tbody>
                          </table>
                          
                          CSS-код:
                          .table-fixed {
                            width: 100%;
                          }
                          table.table-fixed,
                          table.table-fixed>thead,
                          table.table-fixed>tbody,
                          table.table-fixed>thead>tr,
                          table.table-fixed>tbody>tr,
                          table.table-fixed>thead>tr>th,
                          table.table-fixed>tbody>td {
                            display: block;
                          }
                          table.table-fixed>thead>tr:after,
                          table.table-fixed>tbody>tr:after {
                            content: ' ';
                            display: block;
                            visibility: hidden;
                            clear: both;
                          }
                          table.table-fixed>tbody {
                            overflow-y: scroll;
                            height: 150px;
                          }
                          table.table-fixed>thead {        
                            overflow-y: scroll;
                          }
                          table.table-fixed>thead::-webkit-scrollbar{
                            background-color: inherit;
                          }
                          table.table-fixed>thead>tr>th,
                          table.table-fixed>tbody>tr>td {
                            float: left;
                          }
                          

                        Вы должны авторизоваться, чтобы оставлять комментарии.