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

оформление списков и таблиц при помощи css и фреймворка Bootstrap

IT, Дети и взрослые

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

Инструкционно-технологическая карта №9

Тема: Оформление списков и таблиц при помощи CSS.

Цель: научиться осуществлять оформление списков и таблиц при помощи css и фреймворка Bootstrap.

Оборудование: персональный компьютер с выходом в Интернет, MS Word, Блокнот, инструкционно-технологическая карта №9.

Время выполнения: 2 часа.

Теоретическая часть к практической работе

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

Базовое оформление таблиц

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

...

</table>

Например:

<thead>

<tr>

<th>Фамилия</th>

</tr>

</thead>

<tbody>

<tr>

<td>Чмель</td>

</tr>

<tr>

<td>Щербаков</td>

</tr>

<tr>

<td>Голов</td>

</tr>

</tbody>

</table>

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

Оформление таблиц по типу полос "зебры"

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

...

</table>

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

Например:

<thead>

<tr>

<th>Фамилия</th>

</tr>

</thead>

<tbody>

<tr>

<td>Чмель</td>

</tr>

<tr>

<td>Щербаков</td>

</tr>

<tr>

<td>Голов</td>

</tr>

</tbody>

</table>

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

Создание таблицы с границами

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

<thead>

<tr>

<th>Фамилия</th>

</tr>

</thead>

<tbody>

<tr>

<td>Чмель</td>

</tr>

<tr>

<td>Щербаков</td>

</tr>

<tr>

<td>Голов</td>

</tr>

</tbody>

</table>

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

№ п/п Имя Фамилия E-mail

1 Иван Чмель ivan@mail.ru

2 Петр Щербаков petr@mail.ru

3 Юрий Голов yuri@mail.ru

Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)

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

<thead>

<tr>

<th>Фамилия</th>

</tr>

</thead>

<tbody>

<tr>

<td>Чмель</td>

</tr>

<tr>

<td>Щербаков</td>

</tr>

<tr>

<td>Голов</td>

</tr>

</tbody>

</table>

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

№ п/п Имя Фамилия E-mail

1 Иван Чмель ivan@mail.ru

2 Петр Щербаков petr@mail.ru

3 Юрий Голов yuri@mail.ru

Создание сжатой или компактной таблицы

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

<thead>

<tr>

<th>Фамилия</th>

</tr>

</thead>

<tbody>

<tr>

<td>Чмель</td>

</tr>

<tr>

<td>Щербаков</td>

</tr>

<tr>

<td>Голов</td>

</tr>

</tbody>

</table>

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

Bootstrap 3 - Создание сжатой или компактной таблицы

Дополнительные акцентные классы для строк таблицы

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

<thead>

<tr>

<th>Способ платежа</th>

<th>Дата платежа</th>

<th>Сумма</th>

</tr>

</thead>

<tbody>

<td>Наличные</td>

</tr>

<td>Карта VISA</td>

</tr>

<td>Наличные</td>

</tr>

<td>Наличные</td>

</tr>

<td>Карта VISA</td>

</tr>

</tbody>

</table>

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

Bootstrap 3 - Дополнительные акцентные классы для строк таблицы

Создание адаптивной таблицы с помощью Bootstrap

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

<thead>

<tr>

<th>Фамилия</th>

<th>Увлечения</th>

</tr>

</thead>

<tbody>

<tr>

<td>Чмель</td>

<td>Плавание, бодибилдинг, боевые искусства</td>

</tr>

<tr>

<td>Щербаков</td>

<td>Европейские танцы, Стрип-денс, Ролики</td>

</tr>

<tr>

<td>Голов</td>

<td>Горный велосипед, скейтборд, катание на квадрацикле</td>

</tr>

</tbody>

</table>

</div>

Табличные теги, поддерживаемые Twitter Bootstrap 3

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

Тег Описание

<table> Контейнер для элементов, определяющих содержимое таблицы

<caption> Заголовок таблицы

<thead> Контейнер для элементов, формирующих «шапку» таблицы

<tbody> Контейнер для элементов, формирующих основную часть таблицы

<tr> Контейнер для ячеек, являющихся элементами одной строки

<th> Специальная табличная ячейка для заголовков столбцов

<td> Табличная ячейка, предназначенная для размещения основных табличных данных

Практическая часть

Задание 1. Оформить таблицу с помощью CSS классов Bootstrap. (предварительно загрузив архив Bootstrap из приложения к практической работе, так же ознакомиться со ссылками-примерами работы с Bootstrap).

Задание 2. Оформить список с помощью CSS классов Bootstrap.

Контрольные вопросы

Как работает Bootstrap?
Перечислите правила оформления таблиц.