BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2015-06-18 / Вр:14:17 / просмотров: 5275

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

Этот урок порадует вас – с помощью платформы 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).

Результат:

Заголовок 1 Заголовок 2 Заголовок 3
Содержимое ячейки Содержимое ячейки Содержимое ячейки
Содержимое ячейки Содержимое ячейки Содержимое ячейки
Содержимое ячейки Содержимое ячейки Содержимое ячейки

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

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

Тег Описание
<table> Родительский тег таблиц
<thead> Родительский тег строк заголовка таблицы (<tr>)
<tbody> Родительский тег тела и строк таблицы (<tr>)
<tr> Родительский тег (строка) для ячеек (колонок) таблицы (<td> или <th>)
<td> Ячейка таблицы
<th> Ячейка заголовка таблицы
Должен использоваться внутри тега <thead>
<caption> Описание или краткое содержание таблицы

Пример:

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

Результат:

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

Оформление таблиц с помощью 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).

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

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

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

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

Результат:

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

Таблица с границами
Это стандартная таблица, которую можно часто встретить в 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>

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

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

 

Таблица с режимом подсветки
Очень интересный эффект – при наведении курсора ряд в ячейке подсвечивается серым цветом. Для получения такого эффекта добавьте класс «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>

Результат:

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

Создание компактной таблицы
Если вам нужно сделать таблицу более компактной, можете воспользоваться классом «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>

Результат:

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

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

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

Цветные строки таблицы

Эти классы можете вставлять к тегам <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>

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

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

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 769
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4217