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>) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.

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

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

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

Например:

<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>

Для выделения нечётных строк основной части таблицы (<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 .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>