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

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

Скачать:

ВложениеРазмер
Файл pz_9.docx34.53 КБ

Предварительный просмотр:

Инструкционно-технологическая карта №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.20142005.00
2804Карта VISA04.08.20141270.00
2805Наличные05.08.20141356.50
2806Наличные05.08.20145200.05
2807Карта VISA06.08.2014315.70

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

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

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

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

   

       

           

           

           

           

           

       

   

   

       

           

           

           

           

           

       

       

           

           

           

           

           

       

       

           

           

           

           

           

       

   

№ п/пИмяФамилияE-mailУвлечения
1ИванЧмельivan@mail.ruПлавание, бодибилдинг, боевые искусства
2ПетрЩербаковpetr@mail.ruЕвропейские танцы, Стрип-денс, Ролики
3ЮрийГоловyuri@mail.ruГорный велосипед, скейтборд, катание на квадрацикле

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

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

Тег         Описание

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

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

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

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

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

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

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

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

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

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

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

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


По теме: методические разработки, презентации и конспекты

Методическая разработка мастер - класса Тема: Оформление текстового документа со вставкой таблицы.

данная методическая разработка может быть использована в качестве работы с таблицами в текстовом редакторе WORD...

Конспект урока по Информатике и ИКТ "Вставка и оформление таблиц"

Данный материал может быть использован в преподавании Информатики как в школе, так и учреждениях СПО....

Открытый урок по информатике: «Форматирование ячеек, оформление таблиц».

Открытый урок по информатике: «Форматирование ячеек, оформление таблиц». Педагогическая тема: «Использование технологий проблемного обучения на уроках информатики». Адаптирован...

Методическая разработка урока "Решение задач с помощью электронных таблиц"

Методическая разработка урока по информатике «Решение задач с помощью электронных таблиц»...

Инструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS Excel

Инструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS Excel...

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

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

Практическое занятие 5. Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д.

Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д....