Практичне завдання: Створення таблиць у HTML
| , | . |
|---|
Практичне завдання: Створення таблиць у HTML
Мета: Навчитися створювати таблиці в HTML-документі за допомогою базових тегів:
<table>, <tr>, <td>, <th>.
✅ Крок 1. Створюємо HTML-файл (1 бал)
Пояснення тегів:
• <html> — відкриває HTML-документ.
• <head> — службова частина з налаштуваннями.
• <title> — заголовок сторінки у вкладці браузера.
• <body> — усе, що бачить користувач на сторінці.
Перевірка: Збережи файл як table-[твоє прізвище].html, відкрий у браузері — з'явиться порожня сторінка з назвою "Моя таблиця".
✅ Крок 2. Створюємо просту таблицю (2 бали)Всередині <body> додай:
Пояснення тегів:
• <table> — створює таблицю.
• border="1" — додає рамку навколо клітинок.
• <tr> — рядок таблиці (table row).
• <td> — звичайна клітинка з даними (table data).
Перевірка: У браузері має з’явитися таблиця 2×2.
Далі усі зміни виконуй всередині таблиці перед закриваючим тегом </table>, а таблиця — перед </body>.
✅ Крок 3. Додаємо заголовки стовпців (2 бали) Заміни перший рядок таблиці (<tr>...</tr>) на:
Пояснення тегів:
• <th> — клітинка-заголовок, за замовчуванням виділяється жирним і вирівнюється по центру.
Перевірка: Перший рядок має містити заголовки "Ім’я" та "Вік".
✅ Крок 4. Додаємо ще один рядок до таблиці (2 бали)Після останнього рядка таблиці додай:
Пояснення:
• <td> — звичайна клітинка таблиці з даними.
Перевірка: У таблиці має з’явитися новий рядок з ім’ям і віком.
✅ Крок 5. Вирівнюємо таблицю по центру (1 бал)
Змініть тег <table> на:
Пояснення:
• align="center" — вирівнює всю таблицю по центру сторінки.
Перевірка: Таблиця має переміститися в центр сторінки.
✅ Крок 6. Самостійне завдання (2 бали) 1. Додай два нові стовпці до таблиці — з назвами:
o «Клас» o «Улюблений предмет»
Підказка:
Щоб додати нові стовпці до таблиці, у заголовок використай тег <th>, а для кожного нового значення в рядках — тег <td>.
2. Створи три повних рядки з інформацією для учнів:
Ім’я, вік, клас, улюблений предмет.
✅ Крок 7. Бонусне завдання: вставляємо зображення в таблицю (2 бали)
1. Зміни назву останнього стовпця таблиці на "Фото".
2. Встав у кожну клітинку цього стовпця зображення, використовуючи HTML.
Підказки:
• Для вставки зображення використовуй тег <img>.
Докладно про нього можна прочитати у довіднику:
https://css.in.ua/html/tag/img
• Щоб отримати випадкову картинку, скористайся сервісом:
https://picsum.photos/60
Це посилання повертає квадратне випадкове зображення розміром 60×60 пікселів.
Очікуваний результат:
У кожному рядку таблиці з’явиться зображення в останній клітинці.
Приклад:
про публікацію авторської розробки
Додати розробку