Файл: Лабораторная работа 01 по о. 12 технологии обработки информации Студент гр. Иб71вп П. П. Иванов.docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 08.11.2023
Просмотров: 21
Скачиваний: 3
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА» (СПбГУТ)
Кафедра информационных управляющих систем
Лабораторная работа № 01
по Б1.О.12 «ТЕХНОЛОГИИ ОБРАБОТКИ ИНФОРМАЦИИ»
Студент гр. ИБ-71вп_____________________________ П. П. Иванов
(подпись)
Проверил ___________________________ А. В. Параничев
(оценка и подпись)
Санкт-Петербург
2023 год
ОТОБРАЖЕНИЕ ДАННЫХ В ТАБЛИЧНОМ ВИДЕ С ПОМОЩЬЮ HTML и CSS
Запишем табличные данные для индивидуального варианта заданий с помощью HTML+CSS, используя онлайн-ресурс JSFiddle [любой из ресурсов "песочницы" (sandbox) или https://codesandbox.io/s/2lnox6vln или https://codepen.io/ppjln/pen/oEZXjV ] https://jsfiddle.net/3d47abe9/ [выделенное зеленым прочитать и перед отправкой отчета удалить; выделенное желтым поменять на свое; в данном задании нужно оформить HTML+CSS, а для скрипта JS оставить только "заглушки"]
Код HTML отображения таблицы: [подставить свои данные, minimalistBlack переименовать, все методы и таблицы также переименовать; после выполнения работы подставить онлайн-ссылку, нажав "Save" и "OK" в меню!!! данные следует взять из табл. 1]
Таблица 1
Индивидуальное задание
| Пред-послед-няя цифра зачетной книжки | Послед-няя цифра зачетной книжки | Тематика табличных данных (выбрать 5 параметров для отображения 8 записей; данные можно сформировать примерно или используя Интернет ) |
| 0,2,4,6,8 | 0 | Грузовые автомобили |
| 0,2,4,6,8 | 1 | Легковые автомобили |
| 0,2,4,6,8 | 2 | Мотоциклы |
| 0,2,4,6,8 | 3 | Велосипеды |
| 0,2,4,6,8 | 4 | Бытовые нагреватели |
| 0,2,4,6,8 | 5 | Бытовые вентиляторы |
| 0,2,4,6,8 | 6 | Серверы хранения данных |
| 0,2,4,6,8 | 7 | Среды разработки |
| 0,2,4,6,8 | 8 | Операционные системы |
| 0,2,4,6,8 | 9 | Помещения для командных игр |
| 1,3,5,7,9 | 0 | Техника для уборки гостиниц |
| 1,3,5,7,9 | 1 | Данные зачетной книжки студента |
| 1,3,5,7,9 | 2 | Данные экзаменационной ведомости |
| 1,3,5,7,9 | 3 | Музыкальные предпочтения |
| 1,3,5,7,9 | 4 | Устройства микроклиматического контроля |
| 1,3,5,7,9 | 5 | Средства портативного освещения |
| 1,3,5,7,9 | 6 | Средства освещения автомобиля |
| 1,3,5,7,9 | 7 | Автоинструменты |
| 1,3,5,7,9 | 8 | Пожарное оборудование |
| 1,3,5,7,9 | 9 | Отопительное оборудование |
Встроенная JS-таблица
HTML-таблица навигаторов
| index | Название | Производитель | Цена |
|---|---|---|---|
| 0 | Навигатор 1 | Navitel | 15000 |
| 1 | Навигатор 2 | Garmin | 14000 |
| 2 | Навигатор 3 | Navitel | 16000 |
HTML-таблица производителей навигаторов
| index | Название производителя |
|---|---|
| 0 | Navitel |
| 1 | Garmin |
Код CSS для настройки отображения данных: [поменять настройки для всех элементов таблицы, выделив 2 цветовых решения для дальнейшей подсветки элементов таблицы; minimalistBlack переименовать]
.data_select {background-color:red}
.data_default {background-color:blue}
td{width: 100px; height:15px; border: 1px solid gray;}
table.minimalistBlack {
border: 3px solid #000000;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.minimalistBlack td, table.minimalistBlack th {
border: 1px solid #000000;
padding: 5px 4px;
}
table.minimalistBlack tbody td {
font-size: 13px;
}
table.minimalistBlack thead {
background: #CFCFCF;
border-bottom: 3px solid #000000;
}
table.minimalistBlack thead th {
font-size: 15px;
font-weight: bold;
color: #000000;
text-align: left;
}
table.minimalistBlack tfoot {
font-size: 14px;
font-weight: bold;
color: #000000;
border-top: 3px solid #000000;
}
table.minimalistBlack tfoot td {
font-size: 14px;
}
Код "заглушек" для встраивания JavaScript:
function InitializeTable(){
console.log("Выполнена функция инициализации данных при загрузке");
}
function ShowNavigators(){
console.log("Выполнена функция отображения таблицы Навигаторы");
}
function ShowVendors(){
console.log("Выполнена функция отображения таблицы Производители");
}
Продемонстрируем построение таблицы Navigators (рис. 1) и Vendors (рис. 2).
Рис. 1. Демонстрация результата загрузки таблицы Navigators
Рис. 2. Демонстрация результата загрузки таблицы Vendors
Вывод: об использовании HTML+CSS для отображения данных: плюсы и минусы: 5-7 строк.