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

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

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

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

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

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

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

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

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

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

...

Например:

 

   

     

     

     

     

   

 

 

   

     

     

     

     

   

   

     

     

     

     

   

   

     

     

     

     

   

 

№ п/п	Имя	Фамилия	E-mail
1	Иван	Чмель	ivan@mail.ru
2	Петр	Щербаков	petr@mail.ru
3	Юрий	Голов	yuri@mail.ru

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

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

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

...

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

Например:

 

   

     

     

     

     

   

 

 

   

     

     

     

     

   

   

     

     

     

     

   

   

     

     

     

     

   

 

№ п/п	Имя	Фамилия	E-mail
1	Иван	Чмель	ivan@mail.ru
2	Петр	Щербаков	petr@mail.ru
3	Юрий	Голов	yuri@mail.ru

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

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

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

   

       

           

           

           

           

       

   

   

       

           

           

           

           

       

       

           

           

           

           

       

       

           

           

           

           

       

   

№ п/п	Имя	Фамилия	E-mail
1	Иван	Чмель	ivan@mail.ru
2	Петр	Щербаков	petr@mail.ru
3	Юрий	Голов	yuri@mail.ru

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

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

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

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

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

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

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

.

   

       

           

           

           

           

       

   

   

       

           

           

           

           

       

       

           

           

           

           

       

       

           

           

           

           

       

   

№ п/п	Имя	Фамилия	E-mail
1	Иван	Чмель	ivan@mail.ru
2	Петр	Щербаков	petr@mail.ru
3	Юрий	Голов	yuri@mail.ru

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

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

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

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

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

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

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

   

       

           

           

           

           

       

   

   

       

           

           

           

           

       

       

           

           

           

           

       

       

           

           

           

           

       

   

№ п/п	Имя	Фамилия	E-mail
1	Иван	Чмель	ivan@mail.ru
2	Петр	Щербаков	petr@mail.ru
3	Юрий	Голов	yuri@mail.ru

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

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

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

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

   

       

           

           

           

           

       

   

   

       

           

           

           

           

       

       

           

           

           

           

       

       

           

           

           

           

       

       

           

           

           

           

       

       

           

           

           

           

       

   

№ чека	Способ платежа	Дата платежа	Сумма
2803	Наличные	04.08.2014	2005.00
2804	Карта VISA	04.08.2014	1270.00
2805	Наличные	05.08.2014	1356.50
2806	Наличные	05.08.2014	5200.05
2807	Карта VISA	06.08.2014	315.70

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

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

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

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

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

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

Тег         Описание

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

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

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

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

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

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

Табличная ячейка, предназначенная для размещения основных табличных данных Практическая часть Задание 1. Оформить таблицу с помощью CSS классов Bootstrap. (предварительно загрузив архив Bootstrap из приложения к практической работе, так же ознакомиться со ссылками-примерами работы с Bootstrap). Задание 2. Оформить список с помощью CSS классов Bootstrap. Контрольные вопросы Как работает Bootstrap? Перечислите правила оформления таблиц. По теме: методические разработки, презентации и конспекты Методическая разработка мастер - класса Тема: Оформление текстового документа со вставкой таблицы. данная методическая разработка может быть использована в качестве работы с таблицами в текстовом редакторе WORD... Конспект урока по Информатике и ИКТ "Вставка и оформление таблиц" Данный материал может быть использован в преподавании Информатики как в школе, так и учреждениях СПО.... Открытый урок по информатике: «Форматирование ячеек, оформление таблиц». Открытый урок по информатике: «Форматирование ячеек, оформление таблиц». Педагогическая тема: «Использование технологий проблемного обучения на уроках информатики». Адаптирован... Методическая разработка урока "Решение задач с помощью электронных таблиц" Методическая разработка урока по информатике «Решение задач с помощью электронных таблиц»... Инструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS Excel Инструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS Excel... Практическое занятие 4. Составить прогноз товарооборота торгового предприятия на основе данных таблицы с помощью линии тренда, инструмента экспоненциальное сглаживание и т.д. Составить прогноз товарооборота торгового предприятия на основе данных таблицы с помощью линии тренда, инструмента экспоненциальное сглаживание и т.д.... Практическое занятие 5. Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д. Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д.... Мне нравится  Поделиться: