Тема: Практическа задача: страница с ценоразпис или продуктов каталог в таблица

1. Теоретична част

1. Структура на таблица за ценоразпис

Ценоразписът е данни, подредени в редове и колони, затова се оформя с таблица. Заглавието на таблицата се задава с <caption>, а редовете се групират в <thead> за заглавната част и <tbody> за основните данни.

Заглавните клетки се пишат с <th scope='col'>, а данните с <td>; всеки ред е <tr>.
Типични колони: Наименование, Описание, Цена; всеки ред трябва да има еднакъв брой клетки.

2. Обединяване на клетки и обобщаваща част

Когато продуктите са в категории, се добавя ред, който обхваща всички колони чрез colspan. Бележки към цялата таблица, например за ДДС, се поставят в <tfoot>.

colspan='3' обединява клетка върху три колони, а rowspan – върху няколко реда.
<tfoot> съдържа обобщаваща информация и се записва след <thead> и <tbody> (или преди тях, но не по-късно от края на таблицата).

2. Практическо задание

Тема: Практическа задача: страница с ценоразпис или продуктов каталог в таблица

Време за работа: 35 минути

Условие 1: Създайте файл cenorazpis.html в папката на проекта за компютърен сервиз „КомпТех“ и добавете в него ценоразпис като таблица. Използвайте данните: Инсталиране на Windows – преинсталация и драйвери – 25.00 €; Почистване на лаптоп – профилактика и термопаста – 20.00 €; Смяна на SSD диск – демонтаж и клониране на данните – 15.00 €; Премахване на вируси – сканиране и почистване – 18.00 €; Архивиране на данни – копие на външен диск – 12.00 €.

Страницата да има header с h1, main и footer, правилен lang и charset.
В main създайте таблица с caption, thead с три th scope='col' (Услуга, Описание, Цена) и tbody с петте реда.

Условие 2: Разделете услугите на две категории и добавете бележка за цените. Редактирайте таблицата така, че да се чете като структуриран ценоразпис.

Добавете преди съответните редове два категорийни реда с colspan='3': „Софтуерни услуги“ (Windows, вируси) и „Хардуерни услуги“ (почистване, SSD, архивиране – подредете реда им според категориите).
Добавете tfoot с обединена клетка „Цените са с включен ДДС“, задайте border='1' на таблицата и проверете страницата в браузър.

3. Цел

Ученикът упражнява изграждането на таблица с caption, thead, tbody и tfoot и използването на colspan за групиране на данни. След задачата трябва да може да оформи ценоразпис или каталог в самостоятелна HTML страница.

4. Критерии за оценяване

Критерий	Точки
1. Спазване на правилата за здравословни и безопасни условия на труд и опазване на околната среда	10 т.
2. Ефективна организация на работното място	10 т.
3. Спазване на технологичната последователност на операциите според индивидуалното задание
3.1 Създаване на страница с header, main, footer и таблица с caption, thead и tbody	20 т.
3.2 Коректно въвеждане на петте реда с данни в три колони с th scope и td	20 т.
3.3 Категорийни редове с colspan и tfoot с бележка за ДДС	20 т.
3.4 Правилност на кода, точност на данните и коректно показване в браузър	20 т.
Общо:	100 т.

5. Оценъчна скала

Оценка	Точков диапазон
Отличен (6)	90–100 т.
Много добър (5)	80–89 т.
Добър (4)	70–79 т.
Среден (3)	60–69 т.
Слаб (2)	под 60 т.

Изготвил: Цветелин Борисов

Домашна работа

Работете във файл katalog.html в същата проектна папка. Използвайте само HTML елементи, преминати до момента.

Създайте таблица с каталог от 4 продукта на малък онлайн магазин за аксесоари (например клавиатура, мишка, слушалки, уеб камера) с колони Код, Продукт и Цена. Добавете caption, thead и tbody.
Добавете четвърта колона „Наличност“ със стойности „Да“ или „Не“ за всеки продукт и проверете дали всеки ред има еднакъв брой клетки.
Добавете tfoot с обединена клетка, която обяснява как се доставят продуктите, като използвате colspan според броя на колоните.
Групирайте продуктите в две категории („Въвеждащи устройства“ и „Аудио и видео“) с категорийни редове с colspan. Проверете страницата в браузъра и опишете в коментар в кода какво е ролята на всеки елемент от таблицата.