Личный кабинет

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

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


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

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

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

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

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

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

 

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

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

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

Для придания таблицы базового оформления необходимо добавить класс .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>

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

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

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

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

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

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

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

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

С помощью 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>

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

 

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

Тег Описание

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

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

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

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

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

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

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

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

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

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

 

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

  1. Как работает Bootstrap?

  2. Перечислите правила оформления таблиц.

 

Добавлено: 18.11.2020
Рейтинг: 8.1
Комментарии:
0
Сказали спасибо 0
Сказать спасибо
footer logo © Образ–Центр, 2021. 12+