Уроки Bootstrap 3.0 для начинающих (8-й урок) – таблицы

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

Этот урок порадует вас – с помощью платформы Twitter Bootstrap 3 оформлять таблицы вовсе не сложно и сейчас вы в этом убедитесь.
Таблицы создаются стандартными HTML тегами, а потом используются готовые CSS классы, которые предоставляет Twitter Bootstrap 3.

 Для тех, кто не знаком с созданием таблицы в HTML, рекомендую вначале ознакомиться с уроком «Как в HTML создать таблицу».

Вот так выглядит код стандартной таблицы в HTML:

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

Тег <th> служит для создания одной ячейки таблицы, текст внутри ячейки будет выделен жирным шрифтом и выровнен по центру (Строка в коде №3 - №5).

Результат:

Структура и разметка таблицы

Список и описание стандартной HTML-разметки таблиц в Twitter Bootstrap 3

Пример:

<table class="table table-bordered">
  <caption>Таблица для BlogGood.ru</caption>
  <thead>
    <tr>
      <th>Название 1</th>
      <th>Название 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Результат:

Оформление таблиц с помощью CSS классов Bootstrap

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

Первое оформление, которое предоставляет Bootstrap – это класс «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>BlogGood.ru</td>
      <td>Костаневич Степан</td>
      <td>test-1@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>StepkinBlog.ru</td>
      <td>Костаневич Степан</td>
      <td>test-2@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>wm-money.org.ua</td>
      <td>Костаневич Степан</td>
      <td>test-3@mail.ru</td>
    </tr>
</tbody>
</table>

Тег <thead> – контейнер для формирования шапки в таблице (строка в коде №2, №9)

Тег <tbody> – контейнер для основной части таблицы (строка в коде №10, №29)

Тег <th> служит для создания одной ячейки таблицы, внутри которой текст будет выделен жирным шрифтом и выровнен по центру (строка в коде №4 - №7).

В результате вы увидите вот такую оригинальную таблицу:

○ Таблица «Зебра»

Название уже говорит само за себя. Ряды в таблице будут чередоваться: белый ряд, серый ряд. Для оформления таблицы «Зебра», воспользуйтесь классом «table-striped»:

<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>BlogGood.ru</td>
      <td>Костаневич Степан</td>
      <td>test-1@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>StepkinBlog.ru</td>
      <td>Костаневич Степан</td>
      <td>test-2@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>wm-money.org.ua</td>
      <td>Костаневич Степан</td>
      <td>test-3@mail.ru</td>
    </tr>
</tbody>
</table>

Результат:

○ Таблица с границами
Это стандартная таблица, которую можно часто встретить в HTML. Граница добавляется для всех ячеек. Итак, добавьте класс «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>BlogGood.ru</td>
      <td>Костаневич Степан</td>
      <td>test-1@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>StepkinBlog.ru</td>
      <td>Костаневич Степан</td>
      <td>test-2@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>wm-money.org.ua</td>
      <td>Костаневич Степан</td>
      <td>test-3@mail.ru</td>
    </tr>
</tbody>
</table>

В результате получим вот такую таблицу:

○ Таблица с режимом подсветки
Очень интересный эффект – при наведении курсора ряд в ячейке подсвечивается серым цветом. Для получения такого эффекта добавьте класс «table-hover» к тегу <table>:

<table class="table table-bordered table-hover">
<thead>
    <tr>
      <th>№ п/п</th>
      <th>Адрес сайта</th>
      <th>Владелец сайта</th>
      <th>E-mail</th>
    </tr>
</thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>BlogGood.ru</td>
      <td>Костаневич Степан</td>
      <td>test-1@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>StepkinBlog.ru</td>
      <td>Костаневич Степан</td>
      <td>test-2@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>wm-money.org.ua</td>
      <td>Костаневич Степан</td>
      <td>test-3@mail.ru</td>
    </tr>
</tbody>
</table>

Результат:

○ Создание компактной таблицы
Если вам нужно сделать таблицу более компактной, можете воспользоваться классом «table-condensed», применив его к тегу <table>. Конечно, чего-то особенного я здесь ничего не увидел, но может такой компактный вид таблицы вам понравится больше, чем мне:

<table class="table table-bordered table-condensed">
<thead>
    <tr>
      <th>№ п/п</th>
      <th>Адрес сайта</th>
      <th>Владелец сайта</th>
      <th>E-mail</th>
    </tr>
</thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>BlogGood.ru</td>
      <td>Костаневич Степан</td>
      <td>test-1@mail.ru</td>
    </tr>
    <tr>
      <td>2</td>
      <td>StepkinBlog.ru</td>
      <td>Костаневич Степан</td>
      <td>test-2@mail.ru</td>
    </tr>
    <tr>
      <td>3</td>
      <td>wm-money.org.ua</td>
      <td>Костаневич Степан</td>
      <td>test-3@mail.ru</td>
    </tr>
</tbody>
</table>

Результат:

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

○ Цветные строки таблицы
Если вам нужно сделать таблицу более красочной, можно добавить к каждой строке или отдельной ячейке цвет. Какие классы можно использовать? Вот таблица с классами и к ним описание:

Эти классы можете вставлять к тегам <td> или <tr>. Смотрите пример:

<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 class="info">BlogGood.ru</td>
      <td class="warning">Костаневич Степан</td>
      <td class="danger">test-1@mail.ru</td>
    </tr>
    <tr class="active">
      <td>2</td>
      <td>StepkinBlog.ru</td>
      <td>Костаневич Степан</td>
      <td>test-2@mail.ru</td>
    </tr>
    <tr class="success">
      <td>3</td>
      <td>wm-money.org.ua</td>
      <td>Костаневич Степан</td>
      <td>test-3@mail.ru</td>
    </tr>
</tbody>
</table>

В результате вы увидите:

Если понравился урок, жмите на кнопку социальных сетей. В следующем уроке вас ждет еще более интересный материал. Подписывайтесь на обновления моего блога, чтобы не пропустить самые вкусные темы на блоге BlogGood.ru.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: Bootstrap, основы