Практична робота: Конструювання таблиць мовою розмітки HTML

Тема: Створення та форматування таблиць. Об’єднання клітинок. Мета: Навчитися створювати складні табличні структури, керувати межами та об'єднувати рядки й стовпці.

1. Довідник основних тегів та атрибутів

Перш ніж почати, пригадайте призначення основних тегів:

<table> ... </table> — контейнер для всієї таблиці.
<tr> ... </tr> (Table Row) — створює рядок таблиці.
<td> ... </td> (Table Data) — звичайна клітинка з даними.
<th> ... </th> (Table Header) — клітинка-заголовок (текст жирний, по центру).
<caption> ... </caption> — заголовок таблиці (над нею).

Важливі атрибути (використовуються в тегу <table> або <td>):

border="1" — товщина межі в пікселях.
width="50%" або width="400" — ширина таблиці/клітинки.
colspan="n" — об'єднання n стовпців по горизонталі.
rowspan="n" — об'єднання n рядків по вертикалі.
bgcolor="color" — колір фону.

Блок А: Детальний алгоритм (Завдання 1-4)

Завдання 1: "Перша сітка"

Створіть таблицю 2x2 з межею.

Відкрийте тег <table> з атрибутом border="1".
Створіть перший рядок <tr>.
Всередині нього додайте дві клітинки <td>Клітинка 1</td> та <td>Клітинка 2</td>.
Закрийте рядок </tr>.
Повторіть кроки 2-4 для другого рядка.
Закрийте </table>.

Завдання 2: "Шапка таблиці"

Створіть таблицю на 3 стовпці, де перший рядок — заголовки (Прізвище, Ім'я, Вік).

Створіть <table>. Додайте атрибут border="2".
У першому рядку замість <td> використайте три теги <th>.
Додайте другий рядок з трьома <td>, заповнивши їх своїми даними.

Завдання 3: "Кольоровий список"

Створіть список покупок (Назва, Кількість, Ціна).

Створіть таблицю.
Для кожного парного рядка в тегу <tr> додайте bgcolor="lightgrey".
Встановіть ширину таблиці width="300".

Завдання 4: "Розклад на 2 дні"

Створіть таблицю розкладу уроків (№, Понеділок, Вівторок).

Використайте <caption> для назви "Мій розклад".
Перший стовпець зробіть вузьким, а стовпці з днями тижня — широкими (width="150").
Додайте 3-4 уроки.

Блок Б: Робота за підказками (Завдання 5-8)

Завдання 5: "Горизонтальне об'єднання"

Створіть таблицю, де перший рядок повністю об'єднує 3 стовпці з написом "Загальний заголовок".

Підказка: У першій клітинці першого рядка використайте атрибут colspan="3". Інші <td> у цьому рядку писати не потрібно.

Завдання 6: "Вертикальне об'єднання"

Створіть таблицю, де в першому стовпці одна клітинка займає 3 рядки ("Група А"), а поруч у кожному рядку — імена учнів.

Підказка: Використайте rowspan="3" у першій клітинці першого рядка. У наступних двох рядках перший стовпець пропускається.

Завдання 7: "Шахівниця 4х4"

Створіть фрагмент шахової дошки.

Підказка: По черзі фарбуйте клітинки через bgcolor="black". Задайте фіксовану висоту рядків height="50" та ширину клітинок width="50".

Завдання 8: "Прайс-лист з підсумком"

Таблиця на 3 стовпці. Останній рядок має об'єднати перші дві клітинки з написом "Разом:", а в третій — сума.

Підказка: Комбінуйте звичайні рядки та рядок з одним colspan="2".

Блок В: Самостійна робота "Анти-ШІ" (Завдання 9-12)

У цих завданнях опис абстрактний. Вам потрібно самостійно спроектувати структуру.

Завдання 9: "Логічний лабіринт"

Побудуйте таблицю 5х5. Видаліть "проходи" в лабіринті, зафарбувавши "стіни" чорним кольором, а шлях — білим. Вхід має бути у верхньому лівому куті, вихід — у нижньому правому. Клітинки повинні бути ідеально квадратними.

Завдання 10: "Творчий кросворд"

Створіть сітку для кросворду (7х7), де частина клітинок "пусті" (без меж або чорні), а в кутиках деяких білих клітинок стоять маленькі цифри (використовуйте тег <sub>). Ви повинні відтворити форму будь-якої літери (наприклад, "Г" або "П") за допомогою білих клітинок.

Завдання 11: "Графік чергування (Складний)"

Створіть таблицю чергування.

Рядок 1: "Місяць: Вересень" (об'єднує всі стовпці).
Рядок 2: "Тиждень 1" (на 3 стовпці), "Тиждень 2" (на 4 стовпці).
Рядок 3: Дні тижня.
Кожна клітинка з днем має містити прізвище, яке написане курсивом та іншим кольором.

Завдання 12: "Проектування пазла"

Створіть таблицю 4х4, де кожна клітинка має різний колір фону. Проте, ви повинні використати rowspan та colspan так, щоб у таблиці не залишилося жодної одинарної клітинки 1х1. Вся таблиця має складатися тільки з об'єднаних блоків (L-подібні форми зробити неможливо, тому використовуйте прямокутники 1х2, 2x1, 2x2).

ІНФОРМАТИКА НУШ

Конструювання таблиць мовою розмітки HTML